微信小程序tab标签滚动组件封装，滑块滚动+容器滚动效果

tabs标签滚动

最近公司需要优化tab的滚动效果，看了很多大佬的写法，很不明白，就自己研究了一下，虽然简单，但总算实现自己想要的效果了。
html代码：

<view class='content'>
    <scroll-view scroll-x="{{scrollX}}" class='scroll-tab' scroll-left='{{scrollLeft}}px' scroll-with-animation style="background-color:{{boxBg}};line-height:{{heightLine}}rpx">
        <view class="tab-list">
            <view wx:for='{{tabs}}' wx:key='index' class="tab tab-item  {{ current == index? 'active-tab' : ''}};"
                style="color:{{current == index? activeCurrentColor : currentColor}};font-size:{{current == index? activeFontSize : fontSize}}rpx;padding: 0 {{padding}}rpx;" catchtap='selectTab'
                data-index='{{index}}'>
                <view>{{item.name}}</view>
            </view>
            <view wx:if="{{showBar}}" class='underline' style='width:{{width/2}}px;left:{{offset+width/4}}px;background-color:{{lineColor}};'></view>
        </view>
    </scroll-view>

    <!-- <swiper class='swiper' bindchange='changeSwiper'  current='{{select}}'>
   <swiper-item wx:for="{{tabs}}" wx:key='index'>{{item.name}}+{{offset}}</swiper-item>
  </swiper> -->
</view>

js代码：

// JS文件swiperTab.js
// pages/swiperTab/swiperTab.js
Component({
    properties: {
        //是否显示滑块
        showBar: {
            type: Boolean,
            value: true
        },
        //是否可以滚动
        scrollX: {
            type: Boolean,
            value: true
        },
        // item padding值,rpx值
        padding: {
            type: Number,
            value: 20
        },
        //列表行高,rpx值
        heightLine: {
            type: Number,
            value: 80
        },
        // 滑块颜色
        lineColor: {
            type: String,
            value: "#f00"
        },
        // 当前激活滑块的index
        current: {
            type: Number,
            value: 0,
            observer: "change_current"
        },
        // 字体大小(传的是rpx单位)
        fontSize: {
            type: Number,
            value: 32
        },
        //选中的时的字体大小,rpx单位
        activeFontSize: {
            type: Number,
            value: 32
        },
        //tabbar背景
        boxBg: {
            type: String,
            value: "#000"
        },
        // 当前文本颜色
        activeCurrentColor: {
            type: String,
            value: "#fff"
        },
        // 未激活文本颜色
        currentColor: {
            type: String,
            value: "#6CC6F9"
        },
        tabs: {
            type: Array,
            value: [
                { id: '1', name: '服饰', ip: 'one' },
                { id: '2', name: '家居', ip: 'two' },
                { id: '3', name: '日用品', ip: 'three' },
                { id: '4', name: '百货', ip: 'four' },
                { id: '5', name: '水果', ip: 'five' },
                { id: '6', name: '生鲜', ip: 'six' },
                { id: '7', name: '鞋子', ip: 'seven' },
                { id: '8', name: '护肤品', ip: 'eight' },
            ],
        },
    },
    //scroll-view为滚动容器的样式，tab-item'为item的样式，
    externalClasses: [],
    /**
     * 页面的初始数据
     */
    data: {
        width: '60',
        current: 0,
        offset: 0,
        scrollLeft: 0,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },
    lifetimes: {
        attached() {
            this.get_tab();
        }
    },
    methods: {
        //监听当前滑块
        change_current(newVal) {
            let that = this;
            that.setData({
                current: newVal
            })
        },
        //tabItem
        get_tab() {
            console.log(4561389)
            let that = this;
            let query = wx.createSelectorQuery().in(that);
            query.select('.scroll-tab').fields({
                scrollOffset:true
            })
            query.select(".active-tab,").boundingClientRect().exec(res => {
                console.log(res);
                let offsetLeft = res[0].scrollLeft
                let width = res[1].width;
                let left = res[1].left
                // let scrollLeft = res[0].left
                that.setData({
                    width,
                    offset:offsetLeft+left
                },()=>{
                    that.scrollByIndex();
                })
            });
        },

        //点击选中样式，横线距离计算
        selectTab: function (e) {
            let that = this;
            console.log(e)
            that.setData({
                current: e.currentTarget.dataset.index,
            },
                () => {
                    console.log(789431)
                    that.get_tab();
                }
            );
        },

        //滚动容器移动
        scrollByIndex(){
            let that = this;
            let {offset} =that.data;
            var screenWidth = wx.getSystemInfoSync().windowWidth;
            var large2 = offset + 100;
            console.log(large2, large2 >= screenWidth)
            if (large2 >= screenWidth) {
                that.setData({
                    scrollLeft: large2 / 2
                })
            } else {
                that.setData({
                    scrollLeft: 0
                })
            }
        },

        //swiper滑动切换
        changeSwiper: function (e) {
            let that = this;
            that.setData({
                current: e.detail.current,
            })

            var large = that.data.current * that.data.width;
            that.setData({
                offset: large,
                // scrollLeft: large / 3
            })
            var screenWidth = wx.getSystemInfoSync().windowWidth;
            console.log("---", screenWidth, that.data.offset);
            var large2 = (that.data.current + 2) * that.data.width;
            console.log(large2, large2 >= screenWidth)
            if (large2 >= screenWidth) {
                that.setData({
                    scrollLeft: large2 / 2
                })
            } else {
                that.setData({
                    scrollLeft: 0
                })
            }
        },
    },


})

css代码：

/* component/page-tabbar/text-tab.wxss */
/* 样式swiperTab.wxss */
/* pages/swiperTab/swiperTab.wxss */
.content {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.tab-list {
  width: 100%;
  position: relative;
}

.scroll-tab {
  white-space: nowrap;
  width: 100%;
  position: relative;
  /* height: 80rpx; */
  /* background-color: #fff; */
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.scroll-tab .tab {
  display: inline-block;
  text-align: center;
  letter-spacing: 2rpx;
  /* background-color: red; */
  /* padding: 10rpx; */
}

/* .scroll-tab .active-tab{
  color: red;
} */
.scroll-tab .underline {
  z-index: 999;
  position: absolute;
  /* background: red; */
  border-radius: 20rpx;
  height: 6rpx;
  bottom: 0;
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transition: all 200ms ease;
  /* Firefox 4 */
  -moz-transition: all 200ms ease;
  /* Safari and Chrome */
  -webkit-transition: all 200ms ease;
  /* Opera */
  -o-transition: all 200ms ease;
}

.swiper {
  width: 100%;
  height: 100vh;
}

能够实现滚动以及滑动的动画效果。