WeChat applet tab switching, swipeable switching, the navigation bar follows the scrolling implementation

Introduction

When I see that the Toutiao applet page can be swiped and switched, and the tab navigation bar will also scroll, click the tab navigation, the page will slide, and the navigation bar will also scroll, so I am thinking about how to implement this function.

For example, the user experience of shopping mall categories should be much better if they are made to slide left and right to switch categories. I am just a small demo here, and I don’t think about the problem of data. I mainly think about realizing such a function, which may be introduced later. There will be problems after the data, welcome to discuss with each other

solution process

1. When I wanted to implement this problem, I found a lot of other people's blogs to read. The layout of the main page is relatively uniform. The tab navigation bar uses the <scroll-view> tag, and the content uses <swiper>. The parameters hope to refer to the api documentation by yourself, but explain more

The layout code is as follows:

wxml

 

< view class ="container" > 
    <!-- tab navigation bar --> 
    <!-- scroll-left attribute can control scroll bar position --> 
    <!-- scroll-with-animation scrolling adds animation transition --> 
    < scroll-view scroll-x ="true" class ="nav" scroll-left ="{{navScrollLeft}}" scroll-with-animation ="{{true}}" > 
        < block wx:for ="{{ navData}}" wx:for-index = "idx" wx:for-item = "navItem" wx:key = "idx" > 
            <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
        </block>        
    </scroll-view>
    <!-- 页面内容 -->
    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">        
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
            {{tabItem}}
        </swiper-item>
    </swiper>
</view>

 

wxss

/**index.wxss**/
page{
    width: 100%;
    height: 100%;
}
.container{
    width: 100%;
    height: 100%;
}
.nav {
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80rpx;
    background: #f7f7f7;
    font-size: 16px;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.nav-item {
    width: 20%;
    display: inline-block;
    text-align: center;
}
.nav-item.active{
    color: red;
}
.tab-box{
    background: greenyellow;
    padding-top: 80rpx;
    height: 100%;
    box-sizing: border-box;
}
.tab-content{
    overflow-y: scroll;
}

js

// index.js 
// Get the application instance 
const app = getApp()

Page({
    data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false ,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        navData: [
            {
                text: 'Home'
            },
            {
                text: 'Health'
            },
            {
                text: 'emotion'
            },
            {
                text: 'Workplace'
            },
            {
                text: 'Parenting'
            },
            {
                text: 'Dispute'
            },
            {
                text: 'green onion'
            },
            {
                text: 'Class'
            },
            {
                text: 'Class off'
            }
        ],
        currentTab: 0,
        navScrollLeft: 0
    },
    // Event handler 
    onLoad: function () {
         if (app.globalData.userInfo) {
             this .setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        } else  if ( this .data.canIUse) {
             // Because getUserInfo is a network request, it may return after Page.onLoad 
            // So add a callback here to prevent this situation 
            app.userInfoReadyCallback = res => {
                 this . setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
            }
        } else {
             // Compatible processing without open-type=getUserInfo version 
            wx.getUserInfo({
                success: res => {
                    app.globalData.userInfo = res.userInfo
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    })
                }
            })
        }


        wx.getSystemInfo({
            success: (res) => {
                this.setData({
                    pixelRatio: res.pixelRatio,
                    windowHeight: res.windowHeight,
                    windowWidth: res.windowWidth
                })
            },
        })       
    },
    switchNav(event){
        var cur = event.currentTarget.dataset.current; 
         // The width of each tab option is 1/5 
        var singleNavWidth = this .data.windowWidth / 5 ;
         // The tab option is centered                             
        this .setData({
            navScrollLeft: (cur - 2) * singleNavWidth
        })      
        if (this.data.currentTab == cur) {
            return false;
        } else {
            this.setData({
                currentTab: cur
            })
        }
    },
    switchTab(event){
        var cur = event.detail.current;
        var singleNavWidth = this.data.windowWidth / 5;
        this.setData({
            currentTab: cur,
            navScrollLeft: (cur - 2) * singleNavWidth
        });
    }
})

The page code is as shown in the above three parts, you can directly create a new project for testing

The effect diagram is as follows

Precautions

A problem encountered when dealing with the top tab navigation and the bottom page sliding, is the problem encountered when assigning a value to scrll-left in <scroll-view>

Logically speaking, when the tab navigation subscript is less than 2 at the beginning, the navigation bar does not scroll. When it is greater than 2, the navigation bar is swiped to the left to center the selected navigation bar, but when the leftmost option cannot be seen due to left sliding, I Click the left option again and hope that the navigation will slide to the right, and you can see the navigation on the left. Calculating the scroll-left according to the above js code will produce a negative value, but even if the scroll-left is a negative value, the scroll bar will not indent to the left. , so even if it is a negative value, which is equivalent to 0, when I was doing it, I was thinking about how to solve this with logic, thinking about writing various judgments, calculating the distance, and the result was that the last sentence of the code was directly assigned, which was also very speechless. .

summary

The above is just a test demo, which can be used for reference. If students import data through this demo and succeed or fail, welcome to communicate and discuss! ! !