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


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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
vue Element左侧无限级菜单实现
Jun 10 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
MySQL数据源表结构图示
2008/06/05 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
Yii配置文件用法详解
2014/12/04 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python实现GUI学生信息管理系统
2020/04/05 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python字典改变value值方法总结
2019/06/21 Python
python Django 创建应用过程图示详解
2019/07/29 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python raise的基本使用
2020/09/10 Python
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
年终自我鉴定
2013/10/09 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
致全体运动员广播稿
2014/02/01 职场文书
学生生病请假条范文
2014/02/16 职场文书
专题组织生活会方案
2014/06/15 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2014年变电站工作总结
2014/12/19 职场文书