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

效果图

.wxml

1. <view class="group-box">
2.   <label class="radio" wx:for="{{['单周','双周','全选']}}" wx:key="index" bind:tap="radioChange"
3.   data-index="{{index}}">
4.       <radio checked="{{index === zcTem.index}}"/>{{item}}
5.   </label>
6. </view>
7. <view class="week-box">
8.   <view wx:for="{{zcArray}}" wx:key="index" class="week-item {{zcTem.arr[index]?'active':''}}"
9.   bind:tap="zcSelect" data-index="{{index}}">
10.     {{item}}
11.   </view>
12. </view>
13. <view class="label">{{zcTem.label}}</view>

复制代码

.wxss

1. view{box-sizing: border-box;}
2. .group-box{
3.   display: flex;
4.   align-items: center;
5.   justify-content: center;
6.   padding: 30rpx 0;
7. }
8. .group-box>label{
9.   display: flex;
10.   align-items: center;
11. }
12. .group-box>label:nth-child(2){
13.   margin: 0 50rpx;
14. }
15. .week-box{
16.   padding: 0 50rpx;
17. }
18. .week-item{
19.   display: inline-flex;
20.   align-items: center;
21.   justify-content: center;
22.   width: calc((100% - 64rpx) / 5);
23.   height: 68rpx;
24.   margin: 10rpx 0 0 16rpx;
25.   background-color: #F3F5F7;
26.   border-radius: 10rpx;
27.   transition: background-color 0.3s;
28. }
29. .week-item:nth-child(5n + 1){
30.   margin-left: 0;
31. }
32. .active{
33.   background-color:#07C160;
34.   color: white;
35. }
36. .label{
37.   text-align: center;
38.   padding: 30rpx;
39. }

复制代码

.js

1. Page({
2.   data: {
3.     zcCount:25,
4.     zcTem:{
5.       label: '',
6.       index: -1,
7.       arr: []
8.     },
9.     zcArray:[],
10.     zcSingle:[],
11.     zcDouble:[],
12.   },
13.   onLoad(){
14.     const arr = []
15.     const single = []
16.     const double = []
17.     const zcCount = this.data.zcCount
18.     const zcTem = this.data.zcTem
19.     for (let i = 1; i <= zcCount; i++) {
20.       arr.push(`${i}`)
21.       zcTem.arr.push('')
22.       if (i % 2 !== 0) {
23.         single.push(`${i}`)
24.         double.push('')
25.         continue
26.       }
27.       single.push('')
28.       double.push(`${i}`)
29.     }
30.     this.setData({
31.       zcTem,
32.       zcArray:arr,
33.       zcSingle:single,
34.       zcDouble:double,
35.     })
36.   },
37.   radioChange(e){
38.     const index = e.currentTarget.dataset.index
39.     const o = this.data.zcTem
40.     if (index === o.index) {
41.       o.index = -1
42.       o.label = ''
43.       o.arr = []
44.       this.setData({
45.         zcTem:o,
46.       })
47.       return
48.     }
49.     o.index = index
50.     let tem
51.     if (index === 0) {
52.       const d = this.data.zcSingle
53.       o.label = `第${d[0]}-${d[d.length - 1]}周(单周)`
54.       tem = JSON.stringify(d)
55.     } else if (index === 1) {
56.       const d = this.data.zcDouble
57.       o.label = `第${d[1]}-${d[d.length - 2]}周(双周)`
58.       tem = JSON.stringify(d)
59.     } else {
60.       const d = this.data.zcArray
61.       o.label = `第1-${d[d.length - 1]}周`
62.       tem = JSON.stringify(d)
63.     }
64.     o.arr = JSON.parse(tem)
65.     this.setData({
66.       zcTem:o,
67.     })
68.   },
69.   zcSelect(e){
70.     const index = e.currentTarget.dataset.index
71.     const o = this.data.zcTem
72.     o.arr[index] = o.arr[index] ? '' : `${index + 1}`
73.     if (JSON.stringify(o.arr) === JSON.stringify(this.data.zcArray)) {
74.       o.index = 2
75.       const d = this.data.zcArray
76.       o.label = `第1-${d[d.length - 1]}周`
77.       this.setData({
78.         zcTem:o
79.       })
80.       return
81.     }
82.     if (JSON.stringify(o.arr) === JSON.stringify(this.data.zcSingle)) {
83.       o.index = 0
84.       const d = this.data.zcSingle
85.       o.label = `第${d[0]}-${d[d.length - 1]}周(单周)`
86.       this.setData({
87.         zcTem:o
88.       })
89.       return
90.     }
91.     if (JSON.stringify(o.arr) === JSON.stringify(this.data.zcDouble)) {
92.       o.index = 1
93.       const d = this.data.zcDouble
94.       o.label = `第${d[1]}-${d[d.length - 2]}周(双周)`
95.       this.setData({
96.         zcTem:o
97.       })
98.       return
99.     }
100.     const len = o.arr.length
101.     let arr = ''; let start = ''; let end = '周'; let or = 0; let name = ''
102.     for (let i = 0; i < len; i++) {
103.       if (o.arr[i]) {
104.         if (end === '周') {
105.           name = parseInt(o.arr[i]) % 2 !== 0 ? '单周' : '双周'
106.           start = arr ? `,第${o.arr[i]}` : `第${o.arr[i]}`
107.         }
108.         if (o.arr[i + 1]) {
109.           if (or === 2) {
110.             or = 0
111.             arr += start + end
112.             start = ''
113.             end = '周'
114.             continue
115.           }
116.           or = 1
117.           end = `-${o.arr[i + 1]}周`
118.           continue
119.         }
120.         if (or !== 1 && o.arr[i + 2]) {
121.           i += 1
122.           or = 2
123.           end = `-${o.arr[i + 1]}${name}`
124.           continue
125.         }
126.         i += or === 1 ? 1 : 2
127.         or = 0
128.         if (start) {
129.           arr += start + end
130.           start = ''
131.           end = '周'
132.         }
133.       }
134.     }
135.     o.index = -1
136.     o.label = arr
137.     this.setData({
138.       zcTem:o
139.     })
140.   }
141. })

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告