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


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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
原生js实现下拉框选择组件
Jan 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
mayfish 数据入库验证代码
2010/04/30 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python使用matplotlib绘制热图
2018/11/07 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python程序控制语句用法实例分析
2020/01/14 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
高中历史教学反思
2014/02/08 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
反邪教观后感
2015/06/11 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android