实现如上图效果 。选中效果和未选中效果实现。
1.wxss文件。设置css样式。选中效果样式和默认的效果样式。
stateChoose选中样式。 stateNotchoose未选中（默认）样式
.stateChoose {
width: 206rpx;
height: 62rpx;
background: #f0f8ff;
border: 1rpx solid #0281fe;
border-radius: 10rpx;
font-size: 28rpx;
font-weight: 400;
text-align: center;
color: #0281fe;
line-height: 62rpx;
margin-top: 46rpx;
}
.stateNotChoose {
width: 206rpx;
height: 62rpx;
background: #ffffff;
border: 1rpx solid #b3b3b3;
border-radius: 10rpx;
font-size: 28rpx;
font-weight: 400;
text-align: center;
color: #333333;
line-height: 62rpx;
margin-top: 46rpx;
}2.wxml文件。布局实现
<!-- popupwindow 全部条件 -->
<view class="show-popup" hidden="{{shaixuanStateHidden}}" bindtap="closePop">
<view class="row bgWhite" style=" flex-wrap: wrap;" catchtap="catchTap">
<block wx:for="{{shaixuanState}}" wx:key="index">
<text class="{{index==checkedIndex?'stateChoose':'stateNotChoose'}}" bindtap="bindChooseState" data-index="{{index}}" style="margin-left: 32rpx;">{{item.name}}</text>
</block>
<view class="divideLine" style="margin-top: 48rpx;"></view>
<view class="row alItemCen" style="width: 100%;">
<text class="textNor" style="flex-grow:1;text-align: center;" bindtap="resetState">重置</text>
<view class="line"></view>
<text class="textNor" style="flex-grow:1;text-align: center;" bindtap="confirmState">确定</text>
</view>
</view>
</view>3.js文件，数据绑定。监听事件。文章来源：https://www.toymoban.com/news/detail-509203.html
data: {
shaixuanState: [{
"name": '全部',
"invStatus": ""
}, {
"name": '未操作',
"invStatus": "0"
}, {
"name": '操作中',
"invStatus": "3"
}, {
"name": '已操作',
"invStatus": "1"
}, {
"name": '已失效',
"invStatus": "5"
}, {
"name": '提交失败',
"invStatus": "2"
}],
checkedIndex: 0,
shaixuanStateHidden: true,
},文章来源地址https://www.toymoban.com/news/detail-509203.html
closePop() {
this.setData({
shaixuanDataHidden: true,
shaixuanStateHidden: true
})
},到了这里，关于微信小程序 — tag标签设置选中效果和未选样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
