微信小程序兴趣标签制作（重复选中）_兴趣标签选择页面设计

微信小程序兴趣标签制作

该组建实现了标签的持续浮动以及重复选中的效果

js端代码

Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex:0,
    interestsCategories: [['编程',false], ['舞蹈',false],['书法',false],['绘画',false],['健身',false],['交友',false]],
    selectCategories:[],
    count:0
    
  },
  changePage:function(event){
    var that = this
    that.setData({
      currentIndex: event.currentTarget.dataset.index
    })
  },
  selectCategories:function(e){
    var that = this
    let index = e.currentTarget.dataset.index
    let interestsCategories = that.data.interestsCategories
    let selectCategories = that.data.selectCategories
    if(selectCategories.length <4){
      if (!interestsCategories[index][1]) {
        interestsCategories[index][1] = true
        that.setData({
          interestsCategories: interestsCategories
        })
        selectCategories.push(e.currentTarget.dataset.tag)
      } else {
        interestsCategories[index][1] = false
        that.setData({
          interestsCategories: interestsCategories
        })
        selectCategories.remove(e.currentTarget.dataset.tag)
      }
    }else{
      wx.showToast({
        title: '最多只能选4个哦~',
        icon:false
      })
      interestsCategories[index][1] = false
      that.setData({
        interestsCategories: interestsCategories
      })
      selectCategories.remove(e.currentTarget.dataset.tag)
    }
    
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

wxml代码

<view class="container">
  <swiper current="{{currentIndex}}">
    <swiper-item>
      <view class="title">你所感兴趣的类别
        <view class="subtitle">xxxx为您准备的独家内容</view>
      </view>

      <view class="interestsCategories">
        <view class="tagContainer" wx:for="{{interestsCategories}}" wx:key="item[0]">
          <view class="tag {{item[1]? 'active':''}}" data-tag="{{item[0]}}" bindtap="selectCategories" data-index="{{index}}" id="{{item}}">{{item[0]}}</view>
        </view>
      </view>
      
      <view class="nextPage" bindtap="changePage" data-index = "1">
        <text>下一个惊喜</text>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="title">具体的兴趣</view>
      <view class="previousPage" bindtap="changePage" data-index = "0">
        <text>上一个惊喜</text>
      </view>
      <view class="nextPage sec" bindtap="changePage" data-index = "2">
        <text>下一个惊喜</text>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="title">选择你所喜欢的兴趣小组</view>
    </swiper-item>
  </swiper>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

wxss代码

page{
  height: 100%;
}

.container{
  background-color: #6969;
  height: 100%;
}
swiper{
  height: 100%;
}

.title{
  text-align: center;
  font-size: 33px;
  margin-top: 15px;
  height: 15%;
}
.title .subtitle{
  font-size: 25px;
  color: #708090;
}

.nextPage{
  background-color: 	#87CEFA;
  opacity: 0.5;
  height: 150rpx;
  width: 150rpx;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  left: 40%;
}
.nextPage text{
  position: relative;
  top: 40%;
  color: gold;   
  font-weight: bold;
}

.nextPage:hover{
  transform: scale(1.2);
  transition: transform linear 1s;
}
.previousPage{
  background-color: 	#87CEFA;
  opacity: 0.5;
  height: 150rpx;
  width: 150rpx;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  left:20%;
}
.previousPage text{
  position: relative;
  top: 40%;
  color: gold;   
  font-weight: bold;
}
.sec{
  left:70%;
}
.interestsCategories{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}

.tagContainer{
  width: 25%;
  margin: 15px;
}

.tag{
  width: 80px;
  height: 40px;
  background: 	#F8F8FF;
  opacity: 50%;
  border-radius: 30%;
  text-align: center;
  line-height: 40px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}

.active{
  animation: none;
  transform: scale(1.2);
  transition: transform linear 0.5s;
  background-color: orange;

}
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,6px)}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100