Baidu small program to achieve up and down linkage. Scroll above, slide the following content to the corresponding area, slide the following content, TAB to switch.

First, switch to realize the scrolling of the content below, and the scrolling content needs to obtain the distance between each part and the top.

Swan.createselectorquery is used to obtain information about selected elements.

// Get the distance between each piece of content and the top of the box
setScrollList() {
        return new Promise((resolve, reject) = > {
            swan.createSelectorQuery()
                .selectAll('.catagory-item')
                .fields({
                    id: false.dataset: false.rect: true.size: true.scrollOffset: true.properties: ['scrollX'.'scrollY'],},res= >{ resolve(res) }).exec(); })},Copy the code

Gets the height of the top navigation bar

 /** * Get the TAB height */
    setTabHeight() {
        return new Promise((resolve, reject) = > {
            swan.createSelectorQuery()
                .select('.tab-swap').boundingClientRect(res= > {
                    resolve(res)
                }).exec()
        })
    },
Copy the code

In order for the last block element to slide to the top, you need to calculate the strut height for height fill. The height you need to fill is the height of the parent box – the height of the last piece of content

 /** * Get box height *@param {*} e* /
    setContainerHeight() {
        return new Promise((resolve, reject) = > {
            swan.createSelectorQuery()
                .select('.container').boundingClientRect(res= > {
                    resolve(res)
                }).exec()
        })
    },
Copy the code

Since the element information is returned asynchronously, use async await synchronous writing. Ensure that the elements are returned in order

    // Roll data processing
    async setScrollData() {
        const tabHeightInfo = await this.setTabHeight();
        const seizeHeightInfo = await this.setContainerHeight();
        const scrollTopList = await this.setScrollList();
        this.setData({
            seizeHeight: seizeHeightInfo.height,
            tabHeight: tabHeightInfo.height
        })
        this.setData({
            topList: scrollTopList.map(item= > {
                return parseInt(item.top - this.data.tabHeight, 10)}),heightList: scrollTopList.map(item= > {
                return item.height
            })
        })
        // Calculate the height needed to add
        this.setData({
            seizeHeight: this.data.seizeHeight - this.data.heightList[this.data.heightList.length - 1]})// Set the scrolling height for the id passed on the previous page
        if (this.data.categoryId) {
            this.setData({
                scrollTop: this.data.topList[this.data.activeIndex]
            })
        }

    },
Copy the code

Call the scroll event of the scrollview

 /** * scrollview *@param {*} e* /
    onScroll(e) {
        let scrollY = e.detail.scrollTop
        // Change the classification navigation according to the scrolling height
        let index = this.data.topList.findIndex((item, index) = > {
            if (index === this.data.topList.length - 1) {
                return scrollY >= item
            } else {
                return scrollY >= item && scrollY < this.data.topList[index + 1]}})this.setData({
            activeTab: index
        })
    },
Copy the code

To ensure that the content is returned correctly, you can use setTimeout to delay the call

TAB switch, content scrolling

/** * Switch navigation *@param {*} e* /
    changeCategory(e) {
        this.setData({
            activeTab: e.detail.name,
            scrollTop: this.data.topList[e.detail.name]   //topList is the height of each block from the top})},Copy the code

SWAN: static page

<view class="equity-container">
    <tabs class="tab-swap" active-name="{{activeTab}}" tabs-underline-color="#ff7200" tabs-inactive-text-color="# 888"
        tabs-active-text-color="#ff7200" max-tab-item-amount="4" bindtabchange="changeCategory">
        <tab-item s-for="item,index in brandList" name="{{index}}" label="{{item.categoryName}}"
            data-id="{{item.categoryId}}" />
    </tabs>

    <scroll-view scroll-y class="container" scroll-into-view="{= toBrandView =}" scroll-top="{= scrollTop =}"
        bindscroll="onScroll">

        <view class="catagory-item" s-for="brandList" id="{{item.categoryId}}">
            <view class="title">{{item.categoryName}}</view>
            <view class="catagory-list">
                <view class="product-item" s-for="brand in brandList[index].list" data-id="{{brand.id}}"
                    data-type="{{brand.brandType}}" bindtap="goToProductDetailClick">
                    <view class="price">Selections {{brand. SalePrice}}</view>
                    <image src="{{brand.logoUrl}}" class="product-logo"></image>
                    <view class="product-name el">{{brand.brandName}}</view>
                </view>
            </view>
        </view>
        <view style="height:{{seizeHeight}}px"></view>
Copy the code