微信小程序兴趣标签制作
该组建实现了标签的持续浮动以及重复选中的效果
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)
}
}
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>
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)}
}