微信小程序 多标签布局 平移滑动动画

最近在做微信小程序的过程中，遇到这种布局的多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 内容为：

   

       

            {{item.title}}

       

       

       

           

           

       

   

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": "失效会员" }]

如有问题，请留言沟通。