微信小程序--单选复选按钮组的实现
2017-12-15 11:22
746 查看
本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定DOM截点,实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。
index.js
index.xml
Tips:此处的{{item.checked?”checked_parameter”:”“}}为三元选择器,即通过checked判断当前是否为选中样式,而后进行样式的添加checked_parameter。
cartList.js
cart.xml
Tips:前端页面通过catchtap的事件捕捉的方式,调用chooseOs的方法,获取当前点击对象的id即id=”{{item.id}}”,然后对选中的事件添加样式this.data.CartList[i].checked = true;,对未选中的事件删除样式this.data.CartList[i].checked = false;
Tips:此处的‘全选’和‘全不选’没有合并,需要小码农们自行整合。
cartList.js
tips:全选跟全部不选的逻辑比较简单就是,将所有所有的checked循环遍历this.data.CartList[i].checked == true或false,然后通过this.setData({CartList})重新定义一下,实现局部刷新。
(一)单选按钮组
模型图如下:index.js
Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据,如果是线上版本需要自行发起request请求 }, onLoad: function (options) { this.data.parameter[0].checked = true; this.setData({ parameter: this.data.parameter, })//默认parameter数组的第一个对象是选中的 }, // 参数点击响应事件 parameterTap:function(e){//e是获取e.currentTarget.dataset.id所以是必备的,跟前端的data-id获取的方式差不多 var that=this var this_checked = e.currentTarget.dataset.id var parameterList = this.data.parameter//获取Json数组 for (var i = 0; i < parameterList.length;i++){ if (parameterList[i].id == this_checked){ parameterList[i].checked = true;//当前点击的位置为true即选中 } else{ parameterList[i].checked = false;//其他的位置为false } } that.setData({ parameter: parameterList }) } })
index.xml
<view class='fwb fz-28 mgt-16 mgb-10'>规格</view> <view class='parameter-wrap'> <block wx:for="{{parameter}}" wx:key="parameter"> <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text> </block> </view>
Tips:此处的{{item.checked?”checked_parameter”:”“}}为三元选择器,即通过checked判断当前是否为选中样式,而后进行样式的添加checked_parameter。
(二)多选按钮组
模型图如下:cartList.js
Page({ data:{ CartList:[],//做空处理,如果购物车为空后端的值没有改变,容易产生报错 }, onLoad: function () { // 获取购物车请求 var that = this; wx.request({ url: request_getCartList,//向后端发起请求,此处的是get的方式,如需要ajax请参照本站内的相关文章 data: { "session3rd": userid, }, success: function (res) { if (res.data.code == -2) { that.setData({ CartList: [] }) } if(res.data.code==1){ that.setData({ CartList: list }) } } }) }, // 多选 chooseOs: function (event) { for (var i = 0; i < this.data.CartList.length; i++) { if (event.currentTarget.id == this.data.CartList[i].id) { if (this.data.CartList[i].checked == true) { this.data.CartList[i].checked = false; var CartList = this.data.CartList; this.setData({ CartList//重定义CartList,使购物车的样式实现局部刷新 }) } else { this.data.CartList[i].checked = true; var CartList = this.data.CartList; this.setData({ CartListt//重定义CartList,使购物车的样式实现局部刷新 }) } } } }, })
cart.xml
<block wx:for="{{CartList}}" wx:key=""> <view class="order-out user-shadow mgb-20 nowrap"> <vi c7e9 ew class="check-btn" catchtap='chooseOs' id="{{item.id}}"> <image class="absoult-v" src="{{imgSrc}}{{item.checked?'type_1':'type_0'}}.png" mode="widthFix"></image> </view> </view> </block>
Tips:前端页面通过catchtap的事件捕捉的方式,调用chooseOs的方法,获取当前点击对象的id即id=”{{item.id}}”,然后对选中的事件添加样式this.data.CartList[i].checked = true;,对未选中的事件删除样式this.data.CartList[i].checked = false;
(三)复选拓展-全选全不选
cart.xml<view class="all-btn" bindtap='allCheckTap' wx:if="{{!checked}}"> <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image> <text>全选</text> </view> <view class="all-btn" bindtap='allCheckTap' wx:if="{{checked}}"> <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image> <text>全不选</text> </view>
Tips:此处的‘全选’和‘全不选’没有合并,需要小码农们自行整合。
cartList.js
// 全选按钮 allCheckTap: function () { this.setData({ checked: !this.data.checked, }) if (this.data.checked) { for (var i = 0; i < this.data.CartList.length; i++) { if (this.data.CartList[i].checked !== true) { this.data.CartList[i].checked = true; var CartList = this.data.CartList; this.setData({ CartList }) } } } else { for (var i = 0; i < this.data.CartList.length; i++) { if (this.data.CartList[i].checked == true) { this.data.CartList[i].checked = false; var CartList = this.data.CartList; this.setData({ CartList }) } } } },
tips:全选跟全部不选的逻辑比较简单就是,将所有所有的checked循环遍历this.data.CartList[i].checked == true或false,然后通过this.setData({CartList})重新定义一下,实现局部刷新。
相关文章推荐
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 微信小程序 按钮滑动的实现方法
- 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
- 微信小程序页面内点击按钮转发 按钮透明的实现方法
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- Android编程实现带有单选按钮和复选按钮的dialog功能示例
- 微信小程序实现多个按钮toggle功能的实例
- 微信小程序 实现列表项滑动显示删除按钮的功能
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- 微信小程序16---悬浮按钮的实现
- 微信小程序-js实现单选功能
- cocos2dx 3.x (单选,多选,复选checkBox按钮的实现) RadioButton
- 微信小程序开发详解---小知识,大功能【实现按钮的随着手指移动】
- Silverlight中利用ListBox特性实现单选按钮组RadioButtonList和复选按钮组CheckBoxList的功能
- 微信小程序,实现多个按钮toggle功能
- 用单选按钮组实现选择字体大小的程序