微信小程序--问题汇总及详解之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个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...
随机推荐
- IOS Window窗口使用
// 程序启动完毕之后就会调用一次 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NS ...
- hdu-3371 Connect the Cities---kruskal
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3371 题目大意: 给n个城市,m条路,k组已知路,求最小费用联通所有城市: 解题思路: kruska ...
- 【洛谷3950】部落冲突(LCT维护连通性)
点此看题面 大致题意: 给你一棵树,\(3\)种操作:连一条边,删一条边,询问两点是否联通. \(LCT\)维护连通性 有一道类似的题目:[BZOJ2049][SDOI2008] Cave 洞穴勘测. ...
- imfilter()用法
功能:对图像进行滤波. 用法: g = imfilter(f, w, filtering_mode, boundary_options, size_options) 其中,f:输入图像,w:滤波掩模, ...
- cuda api查询问题
在查询CUDA运行时API的时候,我用360极速浏览器的时候搜索结果一直不出来,但是用火狐的话就很流畅,所以建议大家在开发时还是用火狐浏览器.
- 《JavaScript入门篇》摘要
0.课程链接 http://www.imooc.com/learn/36 1.在HTML中加入JS的方法 <script type="text/javascript"> ...
- 二十四、MySQL ALTER命令
MySQL ALTER命令 当我们需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 开始本章教程前让我们先创建一张表,表名为:testalter_tbl. root@ho ...
- LeetCode954二倍数对数组
问题:二倍数对数组 给定一个长度为偶数的整数数组 A,只有对 A 进行重组后可以满足 “对于每个 0 <= i < len(A) / 2,都有 A[2 * i + 1] = 2 * A[2 ...
- mysql零散操作
添加对外用户 CREATE USER 'admin'@'%' IDENTIFIED BY '!QAZ2wsx'; GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%'; ...
- Codeforces Round #464 (Div. 2) B. Hamster Farm
B. Hamster Farm time limit per test2 seconds memory limit per test256 megabytes Problem Description ...