小程序循环多个picker选择器,实现动态增、减
现象
循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变;
问题
怎样操作才能实现只改变当前操作的下拉框的值?
思路
在js中设置一个数组变量,存储每个picker选择器默认的值;然后根据bingchange获取相应的索引、e.detail.value,根据这些更新数组,重新赋值,然后根据
数组的索引、值更新相应的picker索引以及值。
wxml
<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>
js
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,
})
},
})
},
参考网址:https://www.cnblogs.com/JinQing/p/6673665.html
小程序循环多个picker选择器,实现动态增、减的更多相关文章
- 【微信小程序】手写索引选择器(城市列表,汽车品牌选择列表)
摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转 场景:城市选择列表, 汽车品牌选择列表 所用组件: scroll-view(小程序原生) https://developers.w ...
- 小程序循环时的item问题
平常在做小程序时,比如循环渲染数据时,如果有多个数据层次,一般都会这样 wx:for-item=item2,它的意思只是简单的起了一个wx:for循环值的别名,不是表示循环item2,index2同理 ...
- 微信小程序循环列表点击每一个单独添加动画
首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...
- 小程序踩坑之不同屏幕下动态改变translate值
案例还原 小程序做一个进度条,可以通过拽转控制进度 那么肯定有一个进度条,不过小程序自己会做适配宽高 6s下这个div的width 是250 6splus就是276 但是问题来了,我拖拽用的是tran ...
- 微信小程序setData的使用,通过[...]进行动态key赋值
首先先介绍一下微信小程序Page.prototype.setData(Object data, Function callback)的讲解: setData函数用于将数据从逻辑层发送到视图层(异步), ...
- 微信小程序分享朋友圈 长海报 canvas 动态高度计算
业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...
- 小程序API:wx.showActionSheet 将 itemList动态赋值
1.发现问题: 小程序调用API:wx.showActionSheet 时发现无论如何都不能将其属性itemList动态赋值. 2.分析问题: 首先我认为可能是格式的问题,itemList必须要求格式 ...
- 微信小程序:酒店订房之时间选择器 picker
下单页面,选择开始日期和结束日期,不废话,直接代码: 1.wxml: <picker mode="date" value="{{date1}}" star ...
- 微信小程序 自定义组件 多列选择器 对象数组 ObjectArray 自关联 三级联动
使用方法 在 Page.json 注册组件 { "usingComponents": { "address-picker": "/component/ ...
随机推荐
- linux 排查page的状态问题
最近遇到一个page的释放异常的问题,堆栈如下: [ 1000.691858] BUG: Bad page state in process server.o pfn:309d22 [ mapcoun ...
- Python在cmd上打印彩色文字
在Windows上编写python程序时,有时候需要对输出的文字颜色进行设置,特别是日志显示,不同级别的日志设置不同的颜色进行展示可以直观查看.本文主要描述通过ctypes.windll.kernel ...
- openwrt中防暴力破解shell的脚本
原文:http://www.right.com.cn/forum/thread-124429-1-1.html 原理:1. snort做入侵检测是很好,但是太大太复杂,我们需要轻量化的操作.当对方进行 ...
- Oracle数据库中的数据出错的解决办法
http://www.jcwcn.com/article/database/oracle/ 今天上班犯了一个严重的错误:把我们系统所使用的Oracle数据库中的数据给改掉了!当发现自己改错时,顿时冒了 ...
- asp.net 服务器 上传文件到 FTP服务器
private string ftpServerIP = "服务器ip";//服务器ip private string ftpUserID = "ftp的用户名" ...
- C# 模拟多线程下载文件
原地址:http://www.cnblogs.com/Opiece/p/4803836.html 客户端 public static string strContent = ""; ...
- Redis入门及主从配置
1.Redis入门简介 Redis是一个开源的使用ANSI C语音编写.支持网络.可基于内存亦可持久化的日志型,Key-Value数据库.支持存储的value类型包括 string(字符串).list ...
- jquery 获取表单的用户输入值的方法
以前的表单中的select input textarea的用户选择输入是通过jQuery的val()方法获取到的,在三一Java前端大拿教我了一个方法可以不用那么麻烦获取数据,只要在这些表单元素上加n ...
- QQ传文件测试要点
总-分-总 UI: 进度:进度条.百分比.速度.已传文件大小 显示传送文件图标.悬浮有文字 功能入口:图标.菜单项 各种提示:开始传送.各种异常信息的提示.传送结束 给好友传文件.给群传文件 功能 ...
- 自己电脑能ping别人的,但别人电脑去不能跟我们的电脑通信
记住一点:多半时防火墙出了问题. 打开“控制面板”——点击“系统和安全”——“Windows防火墙”——点击“打开或关闭”Windows防火墙--点击家庭组网络或者工作组网络——关闭家庭组和工作组的防 ...