前幾天遇到一個需求，做一個答題的界面，頂部是題目編號列表，下面是題目，點擊題目編號跳轉(zhuǎn)到相應(yīng)題目。一開始想用vant weapp中的Tab標簽頁組件來做，也試著用過，中間遇到了某些問題效果不太理想。具體我也忘了啥問題。最后還是用scroll-view+swiper來實現(xiàn)了這一個功能。最后實現(xiàn)效果圖如下。???

主要是通過在scroll-view中設(shè)置?scroll-with-animation="{{ scrollWithAnimation }}" scroll-into-view="{{toview}}" 來實現(xiàn)這個點擊自動滾動的效果。

廢話不多說，直接上代碼了。

wxml

<view>
    <scroll-view scroll-x="true" style="height: 134rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 134rpx;background: white; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;" scroll-with-animation="{{ scrollWithAnimation }}" scroll-into-view="{{toview}}" show-scrollbar="false" enhanced="true">
        <view wx:for="{{questionList}}" style="display: inline-block;" class="questionListClass" bindtap="questionClick" data-index="{{index}}" id="tab{{index}}">
            <view class="questionClass {{currentTab==index?'now':item.answered?'active':''}}">{{index+1}} </view>
        </view>
    </scroll-view>
    <view style="margin-top: 150rpx;">
        <swiper style="height: {{swiperHeight}}px;" current="{{currentTab}}" bindchange="swiperChange">
            <swiper-item wx:for="{{questionList}}" style="position: relative;display: flex;flex-direction: column;overflow:scroll">
                <scroll-view scroll-y="true">
                    <view style="display: flex;flex-direction: column;">
                        <view style="background: white;padding: 32rpx;align-items: center;font-size: 28rpx;">
                            <text>{{index+1}}、</text>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>

    </view>
    <view style="display: flex;position: absolute;bottom: 0;height: 128rpx;width: 100%;align-items: center;justify-content: center;">
        <view wx:if="{{currentTab==0}}" style="height: 74rpx;background: #EB3722;border-radius: 128rpx;width: 80%;display: flex;justify-content: center;align-items: center;color:white" bindtap="nextClick">下一題</view>
        <view wx:else style="display: flex;align-items: center;justify-content:space-evenly;width: 100%">
            <view style="height: 74rpx;background: #EEEEEE;border-radius: 128rpx;width: 40%;display: flex;justify-content: center;align-items: center;color: #666666;" bindtap="preClick">上一題</view>
            <view style="height: 74rpx;background: #EB3722;border-radius: 128rpx;width: 40%;display: flex;justify-content: center;align-items: center;color:white" bindtap="nextClick">{{currentTab==questionList.length-1?'交卷':'下一題'}}</view>
        </view>
    </view>
</view>

?wxss

.container {
    position: relative;
    width: 100%;
}

::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
  
.questionListClass .questionClass {
    background: #F6F7FB;
    width: 64rpx;
    height: 64rpx;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 16rpx;
    margin-right: 16rpx;
    border-radius: 64rpx;
    color: #333333;
    font-size: 32rpx;
    /* margin-top: 50%; */
    border: 2rpx solid white;
}

.questionClass.active {
    background: linear-gradient(180deg, #FE5196 0%, #F77062 100%);
    width: 64rpx;
    height: 64rpx;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 16rpx;
    margin-right: 16rpx;
    border-radius: 64rpx;
    color: white;
    font-size: 32rpx;
    /* margin-top: 50%; */
    border: 2rpx solid white;
}

.questionClass.now {
    background: white;
    width: 64rpx;
    height: 64rpx;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 16rpx;
    margin-right: 16rpx;
    border-radius: 64rpx;
    color: #EB3722;
    font-size: 32rpx;
    /* margin-top: 50%; */
    border: 2rpx solid #EB3722;
}

js文章來源地址http://www.zghlxwxcb.cn/news/detail-842442.html

Page({
    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        questionList: [,,,,,,,,,,],
        currentTab: 0,
        swiperHeight: 300,
        toview: 'tab0',
        scrollWithAnimation: true,
    },

    questionClick(e) {
        console.log(e)
        this.setData({
            currentTab: e.currentTarget.dataset.index
        })

        if (e.currentTarget.dataset.index - 3 > 0) {
            this.setData({
                toview: 'tab' + (e.currentTarget.dataset.index - 3)
            })
        } else {
            this.setData({
                toview: 'tab0'
            })
        }

        console.log(this.data.toview)
        // if (this.currentIndex < 10) {
        //     this.scrollinto = 'tab0'
        // }

    },
    nextClick(e) {
        if (this.data.currentTab == this.data.questionList.length - 1) {//交卷
            
        } else {
            this.setData({
                currentTab: this.data.currentTab + 1
            })
            if (this.data.currentTab - 3 > 0) {
                this.setData({
                    toview: 'tab' + (this.data.currentTab - 3)
                })
            } else {
                this.setData({
                    toview: 'tab0'
                })
            }
        }
    },
    preClick(e) {
        this.setData({
            currentTab: this.data.currentTab - 1
        })
        if (this.data.currentTab - 3 > 0) {
            this.setData({
                toview: 'tab' + (this.data.currentTab - 3)
            })
        } else {
            this.setData({
                toview: 'tab0'
            })
        }
    },
})

到了這里，關(guān)于【小程序】scrollview制作tab導(dǎo)航欄，點擊tab自動滾動到指定位置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！