技術標籤：微信小程式小程式JavaScript

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;
}

能夠實現滾動以及滑動的動畫效果。