微信小程序--问题汇总及详解之picker 增、删
<block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:for-item="item">
<view class="con_txt">
<view class="con_txt1" style="margin-left:30rpx;width:140rpx">销售品申请</view>
<view class="con_txt1 con_txt2">
<view class="section">
<picker bindchange="bindPickerChange" value="{{item.option}}" range="{{objectArray}}" range-key="good_name" data-id="{{objectArray[item.option].id}}" data-index="{{index}}">
<view class="picker" style="height:70rpx;position:relative">
{{objectArray[item.option].good_name}}
<image src="../Image/select.png" style="width:40rpx;height:40rpx;position:absolute;left:80%;top:20%;"></image>
</view>
</picker>
</view>
</view>
<view class="con_txt1">
<view class="section2">
<input value="{{salesList[index].nums}}" name="count" bindinput="numChangeS" data-index="{{index}}" style="text-align:center;height:66rpx !important;padding-top:4rpx;" placeholder-style="color:#ddd;text-align:center;margin-top: 0px;margin-left:-8rpx" placeholder="数量"/>
</view>
</view>
<button class="btnC" hover-class="none" bindtap="reduceSales" data-index="{{index}}">-</button>
</view>
</block>
<view class="hb" bindtap="addSales">
<image src="../Image/addT.png" style="width:30rpx;height:30rpx;float:left;margin-left:38%;"></image>
<view class="text3">继续增加商品</view>
</view>
data: {
salesList: [] //定义一个空数组
},
//销售品删除一行
reduceSales: function (e) {
var that = this;
var index = e.currentTarget.dataset.index;
var list = that.data.salesList;
if (list.length === 1) {
return;
}
list.splice(index, 1);
this.setData({
salesList: list
})
},
//点击添加销售品
addSales: function (e) {
var that = this;
var list = that.data.salesList;
var r = /^\+?[1-9][0-9]*$/; //正整数
var tip = '数量请输入正整数~~';
for (var i = 0; i < list.length; ++i) {
if (list[i].nums <= 0 || !r.test(list[i].nums)) {
wx.showToast({
title: tip,
image: '../Image/error.png',
duration: 2000
});
return;
}
}
var options = this.data.objectArray
this.data.salesList.push({ id: options[0].id, nums: '', option: 0 }) //添加新行的时候nums初始为0
this.setData({
salesList: this.data.salesList
})
},
//销售品申请类
bindPickerChange: function (e) {
var arr = this.data.objectArray //数组;
var value = e.detail.value; //数组子集
var list = this.data.salesList; //数组传递某一项的容器
var index = e.currentTarget.dataset.index; //索引
list[index] = arr[value] //被选中数组的某一项赋给容器的相对应的某一项容器
list[index].option = value //数组子集赋给某一项相对应的容器索引
this.setData({
salesList: list
})
},
//申请数量
numChangeS: function (e) {
var _that = this;
var index = e.currentTarget.dataset.index;
var list = this.data.salesList
list[index].nums = e.detail.value
this.setData({
salesList: list
})
},
// 页面初始化 options为页面跳转所带来的参数
onLoad: function (options) {
var that = this
wx.request({
url: 'https://....',
method: 'GET',
header: { 'content-type': 'application/json' },
data: {},
success: function (res) { // success
var options = res.data.goods;
that.data.salesList.push({ id: options[0].id, nums: '', option: 0 })
that.data.materielList.push({ id: options[0].id, nums: '', option: 0 })
that.data.activesList.push({ id: options[0].id, option: 0 })
that.setData({
objectArray: options,
salesList: that.data.salesList,
})
},
})
},
微信小程序--问题汇总及详解之picker 增、删的更多相关文章
- 微信小程序--问题汇总及详解之form表单
附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...
- 微信小程序--问题汇总及详解之图片上传和地图
地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件 ...
- 微信小程序--问题汇总及详解之清空电话号码
wxml: <view class="btns" wx:for="{{phoneList}}" wx:key="id"> < ...
- 微信小程序--问题汇总及详解之tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接 传参的格式为url=&q ...
- 微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...
- 微信小程序获取用户手机号详解
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...
- 【微信小程序】支付过程详解
一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...
- 微信小程序支付之代码详解
微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发 这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付 ...
- 微信小程序项目wx-store代码详解
这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...
随机推荐
- java Vamei快速教程19 嵌套类
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 到现在为止,我们都是在Java文件中直接定义类.这样的类出现在包(package) ...
- html body上有一条空白!!!
html body 上莫名其妙的就出现了一条空白,怎么搞都搞不定,弄了一下午...... 解决了!!! 格式问题/
- ORACLE的raw属性
网上说RAW类型在网络数据传送的时候可以避免字节的字符集转换,在mssql中使用的GUID类型在oracle中对应的也是raw类型(一般是raw(16)),如果此时使用连接查询将raw类型的字段和va ...
- 【BZOJ4033】[HAOI2015] 树上染色(树形DP)
点此看题面 大致题意: 给你一棵点数为N的带权树,要你在这棵树中选择K个点染成黑色,并将其他的N-K个点染成白色.要求你求出黑点两两之间的距离加上白点两两之间距离的和的最大值. 树形\(DP\) 这道 ...
- vuejs组件的重要选项
new Vue({ el:'#demo', data:{ message:'Hello vue.js!' } }) 我们看到这个括号里面包含了很多中间的选项,小括号里面其实是一些参数,这些参数指定了实 ...
- @TransactionConfiguration过时与替代写法
在使用了Spring的项目中做单元测试时,以前的标准写法是这样的: 但是在高版本的Spring框架中(Spring4.2以后),@TransactionConfiguration已经标注为过时的注解, ...
- Linux环境下使用xampp配置php开发环境
XAMPP (Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是LAMPP,但是为 了避免误 解,最新的几个版本就改名为 XAMPP 了.它可以在Win ...
- 3_HA介绍和安装部署
一.hadoop 2.x产生背景 1.hadoop 1.x中hdfs和mr在高可用和扩展性等方面存在问题.2.hdfs存在的问题:NN单点故障,难以应用于在线场景:NN压力过大,内存受限,影响系统扩展 ...
- 1503: [NOI2004]郁闷的出纳员
Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 13723 Solved: 4989[Submit][Status][Discuss] Descripti ...
- org.hibernate.hql.internal.ast.QuerysyntaxException:user is not mapped [from User where user_code=? and user_password=?]
初学者,一个很低级的错误吧! 找不到映射,最后发现没把类的Hibernate映射文件 添加到Hibernate核心配置文件中去,所以报了这个异常! 在核心文件中添加映射 <mapping r ...