小程序实现多选框+限制点击修改颜色

最新推荐文章于 2024-01-19 14:02:18 发布

心态ya

最新推荐文章于 2024-01-19 14:02:18 发布

阅读量435

点赞数

文章标签：小程序服务器前端 html5 css javascript css3

本文链接：https://blog.csdn.net/qq_56729450/article/details/132086202

版权

XML部分：

<view class="title1 flex align-items-center margin-top-40">
        <van-icon name="user-o" color="#EF901E" size="18" />
        <text>行业岗位</text>
    </view>
    <ul class="job-main flex flex-wrap">
        <li class="{{item.checked ? 'sel-li' : ''}}" data-index="{{index}}" data-checked="{{item.checked}}" wx:for="{{jobHuntList}}" wx:key="index" bind:tap="selJobName">{{item.name}}</li>
    </ul>
    <view class="save">
        <van-button round size="large" type="primary">保存 ({{count}}/5)</van-button>
    </view>

XSS部分：

.title1{
  margin: 20rpx;
}
.title1 text{
  margin-left: 10rpx;
}
.job-main {
  box-sizing: border-box;
  padding: 20rpx;
}
.job-main li{
  background: #ECECEC;
  color: #999999;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  margin: 0 20rpx 20rpx 0;
  border: 1rpx solid #ECECEC;
}
.save{
  width: 650rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}
.sel-li{
 background: #fff !important;
 color: #05B386;
 border: 1rpx solid #05B386 !important; 
}

data部分：

orderAmount: '',
        jobHuntShow: false,
        // 求职偏好
        jobHuntList: [{
                name: '生活/居民服务',
                checked: false
            },
            {
                name: '美容美发',
                checked: false
            },
            {
                name: '代理分销',
                checked: false
            },
            {
                name: '主播艺人',
                checked: false
            },
            {
                name: '职业培训',
                checked: false
            },
            {
                name: '骑手/配送',
                checked: false
            },
            {
                name: '餐饮服务',
                checked: false
            },
            {
                name: '运维/测试/管理员',
                checked: false
            },
            {
                name: '市场推广',
                checked: false
            },
            {
                name: '超市零售',
                checked: false
            },
            {
                name: '教育招聘',
                checked: false
            },
            {
                name: '酒店/旅游',
                checked: false
            },
            {
                name: '司机',
                checked: false
            },
            {
                name: '生产制造',
                checked: false
            },
            {
                name: '其他',
                checked: false
            },
            {
                name: '汽修服务',
                checked: false
            },
        ],
        count: 0

js部分：

// 选择取消效果行业
    selJobName(e) {
        const { checked, index} = e.currentTarget.dataset;
        let count = this.data.count
        console.log(!checked ? count + 1 : count - 1);
        if (this.data.count >= 5 && !checked) {
            Toast('最多选择 五个偏好');
            return
        }
        this.setData({
            [`jobHuntList[${index}].checked`]: !checked,
            count: !checked ? count + 1 : count - 1
        })
    },
    // 计算最多选择五个
    comJobLength() {
        var count = 0
        this.data.jobHuntList.forEach(val => {
            if (val.checked) {
                count++
            }
        });
        this.setData({
            count
        })
    },
    // 点击弹出求职偏好框
    jobPopup() {
        this.setData({
            jobHuntShow: true
        })
    },
    // 关闭求职偏好框
    jobOnClose() {
        this.setData({
            jobHuntShow: false
        })
    },