小程序---给wx:for循环view以及其他控件点击时添加或修改样式
程序员文章站
2022-04-29 14:33:47
...
1.点击wx:for循环的view时添加或修改样式
(1)效果:
点击方便速食前
点击方便速食后
2.wxss代码
先写两个class样式一个是未选中是的一个是选中后的样式:
/*点击前的样式*/
.classify_normal{
width: 160rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #E4E4E4;
border-top: solid 1rpx white;
}
/*被点击选中后的样式*/
.is_checked{
width: 158rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color:white;
border-bottom: solid 2rpx #E4E4E4;
border-left: solid 4rpx red;
}
(3)wxml代码
重要代码:
{{key==index?‘is_checked’:‘classify_normal’}}
data-index=’{{index}}’
<!-- 左边分类栏 -->
<view class="left">
<view wx:for="{{classify}}" wx:key="key" data-url="{{item.classify_id}}" >
<view class="{{key==index?'is_checked':'classify_normal'}}" bindtap="Checked" data-index='{{index}}'>{{item.classify_name}} </view>
</view>
</view>
(4)js代码
重要代码:
e.target.dataset.index—当前点击的下标值
data: {
key: 0,
}
/*点击商品类别的方法 */
Checked:function(e){
this.setData({
key: e.target.dataset.index
})
},
2.其他控件点击是添加或修改样式
与wx:forj基本相同
(1)wxss与wx:for相同
先写两个class样式一个是未选中是的一个是选中后的样式:这里就省略了
(2)wxml代码
重要代码:
{{isCheck?‘is_checked’:‘classify_normal’}}
data-index=’{{index}}’
<view class="left">
<view wx:for="{{classify}}" wx:key="key" data-url="{{item.classify_id}}" >
<view class="{{isCheck?'is_checked':'classify_normal'}}" bindtap="Checked" data-index='{{index}}'>{{item.classify_name}} </view>
</view>
</view>
(3)js代码
data: {
isCheck:flase,
}
/*点击方法 */
Checked:function(e){
this.setData({
isCheck:true,
})
},
上一篇: js中创建class样式css样式
下一篇: CSS中设置鼠标样式