微信小程序 多标签布局 平移滑动动画
最近在做微信小程序的过程中，遇到这种布局的多tab标签的功能。之前我是做IOS开发的，这种东西，已经做成了框架，但是小程序，目前才介入开发，不是很熟悉，所以目前并没有开发出相关的框架，所以，自己就着摸着写了这么个组件封装，便于以后的项目使用，提高效率。点击不同的按钮时，相对应的指示器会跟随平衡滑动，体验非常好。
对应的组件相应文件为：
UIGroupButton.js文件：
// components/groupButton/UIGroupButton.js
Component({
/**
* 组件的属性列表
*/
properties: {
buttonsList:{
type:Array,
value:[]
},
defaultIndex:{
type:Number,
value:0
},
buttonsHeight:{
type:Number,
value:90
},
seperatorHeight:{
type:Number,
value:1
},
seperatorColor:{
type:String,
value:'#f0f0f0'
},
indicatorHeight: {
type: Number,
value: 5
},
indicatorColor: {
type: String,
value: '#f0a0b0'
},
indicatorMargin:{
type: String,
value:"5%"
},
indicatorWidth: {
type: String,
value: "0"
}
},
/**
* 组件的初始数据
*/
data: {
buttonWidth:'50%',
translateX:'0'
},
attached:function(){
if (this.properties.buttonsList ==0 )
{
console.assert(this.properties.buttonsList>0,"group button data is null")
}
else
{
let ft = 100 / Math.max(1, this.properties.buttonsList.length)
this.setData({ buttonWidth: ft.toString()+'%' })
let pt = 100-2*this.toFloat(this.properties.indicatorMargin)*100
let vl = pt.toFixed(2).toString() + '%'
this.setData({ indicatorWidth: vl })
}
},
/**
* 组件的方法列表
*/
methods: {
selectedBarItems(e){
let index = e.currentTarget.dataset.index
let txv = index*100+'%'
this.properties.defaultIndex = index
this.setData({ defaultIndex: index, translateX: txv})
this.triggerEvent('selectedBarItems', {"buttonClickIndex":index})
},
toFloat(percent) {
var str = percent.replace("%", "");
str = str / 100;
return str;
}
}
})
UIGroupButton.wxml 内容为：
<view class="group-button-view">
<view class="group-button" style="height:{{buttonsHeight}}rpx">
<text wx:for="{{buttonsList}}" wx:key="{{index}}" class="group-button-one {{defaultIndex==index?'button-active':'button-no-active'}}" catchtap="selectedBarItems" data-index="{{index}}" style="width:{{buttonWidth}}">{{item.title}}</text>
</view>
<view wx:if="{{seperatorHeight>0}}" class="seperator-view" style="height:{{seperatorHeight}}px;background-color:{{seperatorColor}}"></view>
<view class="indicator-view" style="width:{{buttonWidth}};top:{{-(indicatorHeight-seperatorHeight)/2}}px;transform: translateX({{translateX}});transition: all 0.5s;">
<view class="indicator-view-item" style="left:{{indicatorMargin}};width:{{indicatorWidth}};height:{{indicatorHeight}}px;background-color:{{indicatorColor}};border-radius:{{indicatorHeight/2}}px ">
</view>
</view>
</view>
</view>
UIGroupButton.wxss 内容为：
.group-button-view
{
position: relative;
width: 100%;
background-color: white;
}
.group-button
{
position: relative;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.group-button-one
{
height: 94rpx;
line-height: 94rpx;
text-align: center;
}
.button-active{
color: rgb(30, 30, 30);
font-size: 38rpx;
}
.button-no-active
{
color: rgb(160, 160, 160);
font-size: 34rpx;
}
.seperator-view
{
width: 100%;
position: fixed;
}
.indicator-view
{
position: relative;
margin: 0;
padding: 0;
}
.indicator-view-item
{
position: relative;
background-color: rgb(255, 142, 32);
}
使用步骤,在父组件中引用此子组件，传入相关的数据及样式。
buttonsList为多标签的内容，以字典的方式传入，例如数据：
buttonsList: [{ "title": "潜在会员" }, { "title": "有效会员" }, { "title": "失效会员" }]
如有问题，请留言沟通。
