首页 >> js开发 >> js微信小程序点击view动态添加样式过程解析js大全
js微信小程序点击view动态添加样式过程解析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下基本逻辑:1.给每个view自定义dataIndex属性,从0开始2.自定义一个名为selected的class,作为被选中后的样式3.在wx.js中给viewId属性赋为0,用于默认显示。4.给每个view添加一个点击事件select,在点击某个view时 将dataIndex变成这个view的自定义index5.在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
}
/* 表情盒子 */
.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
},
data: {
viewId : 0
},
select:function(e){
this.setData({
viewId: e.currentTarget.dataset.index
})
},
select:function(e){
this.setData({
viewId: e.currentTarget.dataset.index
})
},由于viewId初始值是0,所以会默认第一个切换了样式。这样就完成了该事件:里面还有几个不足之处,时间仓促,暂且就这样写了。以上就是本文的全部内容,希望对大家的学习有所帮助。
wxml
/* 表情盒子 */
.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
}
/* 表情盒子 */
.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
},
data: {
viewId : 0
},
select:function(e){
this.setData({
viewId: e.currentTarget.dataset.index
})
},
select:function(e){
this.setData({
viewId: e.currentTarget.dataset.index
})
},由于viewId初始值是0,所以会默认第一个切换了样式。这样就完成了该事件:里面还有几个不足之处,时间仓促,暂且就这样写了。以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章:
- JavaScript如何配置vue.config.js 处理static文件夹下的静态文件
- jsPostman动态获取返回值过程详解js大全
- jsJS实现数据动态渲染的竖向步骤条js大全
- jsvue单文件组件无法获取$refs的问题js大全
- js代码javascript实现前端成语点击验证优化
- js微信小程序swiper组件实现抖音翻页切换视频功能的实例代码js大全
- jskeep-Alive搭配vue-router实现缓存页面效果的示例代码js大全
- js微信小程序清空输入框信息与实现屏幕往上滚动的示例代码js大全
- jsVue如何提升首屏加载速度实例解析js大全
- JavaScript详细分析Node.js 多进程