微信小程序单双周选择排序有效果图

效果图

.wxml

<view class="group-box"><label class="radio" wx:for="{{['单周','双周','全选']}}" wx:key="index" bind:tap="radioChange"data-index="{{index}}"><radio checked="{{index === zcTem.index}}"/>{{item}}</label>
</view>
<view class="week-box"><view wx:for="{{zcArray}}" wx:key="index" class="week-item {{zcTem.arr[index]?'active':''}}"bind:tap="zcSelect" data-index="{{index}}">{{item}}</view>
</view>
<view class="label">{{zcTem.label}}</view>

.wxss

view{box-sizing: border-box;}
.group-box{display: flex;align-items: center;justify-content: center;padding: 30rpx 0;
}
.group-box>label{display: flex;align-items: center;
}
.group-box>label:nth-child(2){margin: 0 50rpx;
}
.week-box{padding: 0 50rpx;
}
.week-item{display: inline-flex;align-items: center;justify-content: center;width: calc((100% - 64rpx) / 5);height: 68rpx;margin: 10rpx 0 0 16rpx;background-color: #F3F5F7;border-radius: 10rpx;transition: background-color 0.3s;
}
.week-item:nth-child(5n + 1){margin-left: 0;
}
.active{background-color:#07C160;color: white;
}
.label{text-align: center;padding: 30rpx;
}

.js

Page({data: {zcCount:25,zcTem:{label: '',index: -1,arr: []},zcArray:[],zcSingle:[],zcDouble:[],},onLoad(){const arr = []const single = []const double = []const zcCount = this.data.zcCountconst zcTem = this.data.zcTemfor (let i = 1; i <= zcCount; i++) {arr.push(`${i}`)zcTem.arr.push('')if (i % 2 !== 0) {single.push(`${i}`)double.push('')continue}single.push('')double.push(`${i}`)}this.setData({zcTem,zcArray:arr,zcSingle:single,zcDouble:double,})},radioChange(e){const index = e.currentTarget.dataset.indexconst o = this.data.zcTemif (index === o.index) {o.index = -1o.label = ''o.arr = []this.setData({zcTem:o,})return}o.index = indexlet temif (index === 0) {const d = this.data.zcSingleo.label = `第${d[0]}-${d[d.length - 1]}周(单周)`tem = JSON.stringify(d)} else if (index === 1) {const d = this.data.zcDoubleo.label = `第${d[1]}-${d[d.length - 2]}周(双周)`tem = JSON.stringify(d)} else {const d = this.data.zcArrayo.label = `第1-${d[d.length - 1]}周`tem = JSON.stringify(d)}o.arr = JSON.parse(tem)this.setData({zcTem:o,})},zcSelect(e){const index = e.currentTarget.dataset.indexconst o = this.data.zcTemo.arr[index] = o.arr[index] ? '' : `${index + 1}`if (JSON.stringify(o.arr) === JSON.stringify(this.data.zcArray)) {o.index = 2const d = this.data.zcArrayo.label = `第1-${d[d.length - 1]}周`this.setData({zcTem:o})return}if (JSON.stringify(o.arr) === JSON.stringify(this.data.zcSingle)) {o.index = 0const d = this.data.zcSingleo.label = `第${d[0]}-${d[d.length - 1]}周(单周)`this.setData({zcTem:o})return}if (JSON.stringify(o.arr) === JSON.stringify(this.data.zcDouble)) {o.index = 1const d = this.data.zcDoubleo.label = `第${d[1]}-${d[d.length - 2]}周(双周)`this.setData({zcTem:o})return}const len = o.arr.lengthlet arr = ''; let start = ''; let end = '周'; let or = 0; let name = ''for (let i = 0; i < len; i++) {if (o.arr[i]) {if (end === '周') {name = parseInt(o.arr[i]) % 2 !== 0 ? '单周' : '双周'start = arr ? `,第${o.arr[i]}` : `第${o.arr[i]}`}if (o.arr[i + 1]) {if (or === 2) {or = 0arr += start + endstart = ''end = '周'continue}or = 1end = `-${o.arr[i + 1]}周`continue}if (or !== 1 && o.arr[i + 2]) {i += 1or = 2end = `-${o.arr[i + 1]}${name}`continue}i += or === 1 ? 1 : 2or = 0if (start) {arr += start + endstart = ''end = '周'}}}o.index = -1o.label = arrthis.setData({zcTem:o})}
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。