微信小程序点击view动态添加样式过程解析

微信  /  管理员 发布于 2020-03-08 13:33:45   31

这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

基本逻辑：

1.给每个view自定义dataIndex属性，从0开始

2.自定义一个名为selected的class，作为被选中后的样式

3.在wx.js中给viewId属性赋为0，用于默认显示。

4.给每个view添加一个点击事件select，在点击某个view时 将dataIndex变成这个view的自定义index

5.在view中添加一个三木运算符用于控制选中样式 {{dataIndex == 0 ? 'selected':''}}

附图：

wxml

   好评        中评       差评  

wxss

/* 表情盒子 */ .ICONBOX{  border: 1px solid red;  display: flex;  justify-content: space-around;  /* flex-direction: */  align-items: center;  color: #999;  font-size: 28rpx; } .ic{  margin-right: 5rpx; } .selected{  color: #f63 }

wxjs

 data: {    viewId : 0 },

 select:function(e){  this.setData({   viewId: e.currentTarget.dataset.index  }) },

由于viewId初始值是0，所以会默认第一个切换了样式。

这样就完成了该事件：

里面还有几个不足之处，时间仓促，暂且就这样写了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
• 微信小程序 scroll-view 水平滚动实现过程解析
• 详解解决小程序中webview页面多层history返回问题
• 微信小程序webview与h5通过postMessage实现实时通讯的实现
• 微信小程序移动拖拽视图-movable-view实例详解
• 微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
• 微信小程序webview 脚手架使用详解
• 微信小程序与webview交互实现支付功能
• 微信小程序动态添加view组件的实例代码