视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序自定义多选事件的实现代码
2020-11-27 22:14:35 责编:小采
文档

要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片。而小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断。

直接上代码:

wxml:

 <view class="sel-box">
 /**用wx:for来进行列表渲染**/
 <view wx:for="{{repContent}}" class="multi-selection">
 <text>{{item.message}}</text>
 /**利用数组的下标index来进行判断是哪个的事件**/
 <image src="{{selectIndex[index].sureid? hasSelect : noSelect}}" class="multi-img" data-selectIndex="{{index}}" bindtap="selectRep" />
 </view>
 </view>

js:

Page({
 /**
 * 页面的初始数据
 */
 data: {
 noSelect: 'https://xxxxx/ic_report_nor@2x.png',
 hasSelect: 'https://xxxxx/ic_check_ele@2x.png',
 repContent: [{ message: '广告内容' }, { message: '不友善内容' }, { message: '垃圾内容' }, { message: '违法违规内容' }, { message: '其他' }],
 selectIndex: [
 { sureid: false },
 { sureid: false },
 { sureid: false },
 { sureid: false },
 { sureid: false },
 ],
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },

 selectRep:function(e){
 let index = e.currentTarget.dataset.selectindex; //当前点击元素的自定义数据,这个很关键
 let selectIndex = this.data.selectIndex; //取到data里的selectIndex
 selectIndex[index].sureid = !selectIndex[index].sureid; //点击就赋相反的值
 this.setData({
 selectIndex: selectIndex //将已改变属性的json数组更新
 })
 }
})

currentTarget::事件绑定的当前组件。

dataset:在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

开始入门学习小程序的,看官方文档就好了。

下载本文
显示全文
专题