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


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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
jQuery选择器实例应用
Jan 05 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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生成指定长度随机数最简洁的方法
2014/07/14 PHP
nginx 设置多个站跨域
2021/03/09 Servers
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
常用的js验证和数据处理总结
2016/08/02 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
工作失职检讨书范文
2014/01/16 职场文书
房地产财务管理制度
2014/02/02 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
总结几个非常实用的Python库
2021/06/26 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers