微信小程序自定义多选事件的实现代码


Posted in Javascript onMay 17, 2018

要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片。而小程序和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。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
微信小程序排坑指南详解
May 23 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
AngularJS实现的base64编码与解码功能示例
May 17 #Javascript
You might like
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python实现Dijkstra算法
2018/10/17 Python
python开头的coding设置方法
2019/08/08 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
销售文员的岗位职责
2013/11/20 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
2014年计生标语
2014/06/23 职场文书
农村婚庆主持词
2015/06/29 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
js不常见操作运算符总结
2021/11/20 Javascript
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript