微信小程序 动态绑定事件并实现事件修改样式


Posted in Javascript onApril 13, 2017

微信小程序 动态绑定事件并实现事件修改样式

实例代码

wxml

<scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> 
 <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> 
  <text type="primary" style="width:{{itemWidth}}rpx;" bindtap="bind{{item.id}}" data-typeid="{{item.id}}" class="{{currentId==item.id?'clickSel':'removeSel'}}">{{item.name}}</text> 
 </block> 
</scroll-view>

js

var reportTypeList = [ 
 { name: "日报1", id: "1" }, 
 { name: "目录2", id: "2" }, 
 { name: "季报3", id: "3" }, 
 { name: "月报4", id: "4" }, 
 { name: "日报5", id: "5" }, 
 { name: "目录6", id: "6" }, 
 { name: "季报7", id: "7" }, 
 { name: "月报8", id: "8" }, 
 { name: "日报9", id: "9" }, 
 { name: "目录10", id: "10" }, 
 { name: "季报11", id: "11" }, 
 { name: "月报12", id: "12" }] 
 
var pageObject = { 
 data: { 
  reportTypeList: reportTypeList, 
  num: 0, 
  toLeftNum: 0, 
  itemWidth: 150 
 } 
} 
 
for (var i = 0; i < reportTypeList.length; i++) { 
 (function (item) { 
  pageObject['bind' + item.id] = function (e) { 
   var id = parseInt(e.currentTarget.dataset.typeid) 
 
   this.setData({ 
    currentId: id 
   }) 
  } 
 })(reportTypeList[i]) 
} 
 
Page(pageObject)

wxss

/**index.wxss**/ 
 
.reportTypeScroll { 
 margin: 40px 0px 20px 0px; 
 white-space: nowrap; 
 display: flex; 
} 
 
.clickSel { 
 color: red; 
} 
 
.removeSel { 
 color: black; 
} 
 
text { 
 height: 150rpx; 
 display: inline-block; 
 text-align: center; 
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 #Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 #Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 #Javascript
You might like
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Django如何使用redis作为缓存
2020/05/21 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
会计稽核岗位职责
2015/04/13 职场文书
稽核岗位职责范本
2015/04/13 职场文书
单位介绍信格式范文
2015/05/04 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
关于JavaScript回调函数的深入理解
2021/06/27 Javascript