时间:2021-05-18
这篇文章主要介绍了微信小程序点击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; align-items: center; color: #999; font-size: 28rpx; } .ic{ margin-right: 5rpx; } .selected{ color: #f63 }wxjs
data: { viewId : 0 },由于viewId初始值是0,所以会默认第一个切换了样式。
这样就完成了该事件:
里面还有几个不足之处,时间仓促,暂且就这样写了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序实现给循环列表添加点击样式实例微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但
本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能。分享给大家供大家参考,具体如下:1、效果展示2、操作步骤:①数据绑定view样式背景属性值②通
picker-view相关文章:微信小程序Button微信小程序radio微信小程序slider微信小程序switch微信小程序textarea微信小程序pic
相关文章:微信小程序教程之wxapp视图容器swiper微信小程序教程之wxapp视图容器scroll-view微信小程序教程之wxapp视图容器view微信小
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然