微信小程序tab锚点

<!-- 自定义的导航栏 -->
<!-- 这是自定义组件的内部WXML结构 -->
<view class="topbar">
    <view class="top-name">{{topName}}</view>
    <view class="top-address">{{topAddress}}</view>
</view>

<view class="tab-box" >
    <van-sticky>
        <van-tabs active="{{ active }}" bind:change="ChangeTab" bind:before-change="onBeforeChange"
                  use-before-change="{{ true }}">
            <van-tab
                    wx:for="{{marketList}}"
                    title="{{item.name}}{{item.code}}"
                    wx:key="index"
                    wx:for-index="index"
                    class="tab"
                    id="tab{{index}}"
            ></van-tab>
        </van-tabs>
    </van-sticky>
</view>


<scroll-view 
    id="scroller" 
    class="scroller"
    scroll-y
    scroll-with-animation="true" 
    scroll-into-view="{{ intoindex }}" 
    bindscroll="handelScroll"
>
    <view class="contact-main">
        <view class="contact-box" 
            wx:for="{{marketList}}" 
            wx:for-item="item" 
            wx:key="index" 
            data-bean="{{item}}"
            id="intoindex{{index}}"
            
        >
            <view class="contact-name" id="selected{{index}}" >{{item.name}}{{item.code}}</view>
<!--            <view class="contact-view">-->
<!--                <view class="contact-item" wx:for="{{item.stalls}}" wx:for-item="each" wx:key="index" data-bean="{{each}}" bindtap="goDetail">-->
<!--                    <view class="item-code">{{each.stallNumber}}</view>-->
<!--                    <view class="item-name">{{each.contactName}}</view>-->
<!--                    <view class="item-more">-->
<!--                        <van-tag plain  round type="primary" color="#FE6526" -->
<!--                        style="margin:0px 2px"-->
<!--                        wx:for="{{each.salesList}}"-->
<!--                        wx:key="index"-->
<!--                    >{{item}}</van-tag>-->
<!--                    </view>-->
<!--                </view>-->
<!--                -->
<!--                <view wx:if="{{ item.stalls.length==0 }}" class="none-text">待入驻...</view>-->
<!--            </view>-->

            <van-grid column-num="3" border="{{ false }}" gutter="{{8}}">
                <van-grid-item use-slot wx:for="{{ item.stalls }}" wx:for-item="each" wx:key="index"
                               data-bean="{{each}}" bindtap="goDetail"
                               content-class="grid-item_content" custom-class="grid-item_root">
                    <view class="item-code">{{each.stallNumber}}</view>
                    <view class="item-name">{{each.contactName}}</view>
                    <view class="item-more">
                        <van-tag plain round type="primary" color="#FE6526"
                                 style="margin:0px 2px"
                                 wx:for="{{each.salesList}}"
                                 wx:key="index"
                        >{{item}}
                        </van-tag>
                    </view>
                </van-grid-item>
            </van-grid>
            <view wx:if="{{ item.stalls.length==0 }}" class="none-text">待入驻...</view>

        </view>
    </view>
</scroll-view>



<!-- https://juejin.cn/post/7140224109640630302 -->

// pages/market/market.js

import { doRequestList } from '../../http/marketApi'

const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
      
      statusBarHeight: app.globalData.statusBarHeight,
      winHeight: '100%',
      container:null,
      active:0,
      marketList:[],
      intoindex:"",
      scrollHeight:"",
      anchorArray:[],
      topName:"",
      topAddress:"",
      preventTrigger:true,
     
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getMarket()
      
        wx.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#FE6526',
          animation: {
            duration: 400,
            timingFunc: 'easeIn'
          }
        })


       
    },
    onShow() {

    },
    goDetail(event){
      let itemData= event.currentTarget.dataset.bean;
      var shareData = {
        eiId:itemData.enterpriseId,
      }
      const BuildData = JSON.stringify(shareData);
      wx.navigateTo({ url: `/pages/ChoseGoods/ChoseGoods?detInfo=`+ encodeURIComponent(BuildData) });
    },
    // https://www.jianshu.com/p/41f1289cf42d
    handelScroll(e){
      console.log("相互")
        let scrollTop = e.detail.scrollTop
        var _this = this
        let scrollArr = _this.data.anchorArray;
        console.log(scrollArr)
        for (let i = 0; i < scrollArr.length; i++) {
            if(scrollTop >= 0 && scrollTop < scrollArr[0]) {
                _this.setData({
                    active: 0,
                    preventTrigger:false
                });
            } else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]){
                _this.setData({
                    active: i,
                    preventTrigger:false
                });
            }
        }
        let query = wx.createSelectorQuery().in(_this);
        let heightArr = [];
        let h = 0;
        query.selectAll('.contact-box').boundingClientRect((react) => {
          react.forEach((res) => {
            h += res.height;
            heightArr.push(h)
          })
          _this.setData({
            anchorArray: heightArr
          });
        }).exec();
    },
    getMarket(){
        doRequestList("8b188f986f1311eebd9b1c1b0dc7da9c").then((res) => {
            let resData = res.data;
            console.log(resData)

            let newGoods = resData.areas.map((item) => {

              let childFloor = item.stalls.map((each) => {
                return {
                  ...each,
                  salesList: each.salesVarieties.split(",")
      
                }
              })
              return {
                ...item,
                stalls: childFloor,
              };
            });
            console.log(newGoods)

            this.setData({
              marketList: newGoods,
              topName:resData.name,
              topAddress:resData.address,
            })
          
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
      const tabBar = this.getTabBar()
      tabBar.setData({
        TabBarActive: 0
      })
    },


    onBeforeChange(event){
      console.log("已经执行")
      const { callback, title } = event.detail;
  
      this.setData({
        preventTrigger:true
      })
      
      callback(true)
  
    
    },
    ChangeTab(event){
      if(this.data.preventTrigger==false){
        return
      }
      console.log("执行")
      let indexSeled =Number(event.detail.index)
      this.setData({
        intoindex:'intoindex'+indexSeled
      })
    },
    /**
     * 生命周期函数--监听页面显示
     */


    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

/* pages/market/market.wxss */
.scroller{
    /* height: calc(100vh - 0rpx); */
    height: calc(100vh - 300rpx);
    /*margin-top: 110px;*/
}
.contact-name{
    width: 100%;
    font-size: 28rpx;
    box-sizing: border-box;
    padding: 12rpx 16rpx 16rpx 28rpx;
    /* background: white; */
    color: #646566;
    margin-top: 18rpx;
}
.van-tab__pane--active{
    display: none!important;
}

.none-text{
    text-align: center;
    font-size: 30rpx;
    padding: 20rpx 0rpx;
    width: 100%;
    color: #646566;
}

.contact-view{
    display: flex;
    justify-content: space-between;
    /* background-color: white; */
    flex-direction: row; /*设置主轴方向*/
    flex-wrap: wrap;
    flex-flow: row wrap;
    box-sizing: border-box;

    /*padding: 0rpx 20rpx 20rpx 20rpx;*/
    width: 100%;
}
.contact-item{
    /*width: 32%;*/
    /*border: 1px solid #eee;*/
    /*box-sizing: border-box;*/
    /*padding: 16rpx 16rpx;*/
    /*margin-bottom: 16rpx;*/
    font-size: 28rpx;
    border-radius: 8rpx;
    background: white;
    height: 200rpx;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)*/

}
.contact-view:after {content: ""; width: 32%; }

.grid-item_root{
   height: 200rpx;
}

.grid-item_content{
    font-size: 28rpx;
    border-radius: 8rpx;
    background: white;
}

.item-code{
    text-align: center;
    color: #FE6526;
    font-weight: bold;
    font-size: 34rpx!important;
}
.item-name{
    text-align: center;
    padding: 12rpx 0;
}
.item-more{
    /*padding-bottom: 4rpx;*/
    /*display: inline-flex;*/
}
.contact-main{
    padding-bottom: 200rpx;
    /* padding-top: 58px; */
}




/* 最上面是自定义的样式 */
.topbar {
    background: #FE6526;
    width: 100%;
    /*height: 100px;*/
    /*z-index: 99999;*/
    /*position: fixed;*/
    box-sizing: border-box;
    padding: 20rpx 20rpx;
    top: 0;
    left: 0;
    /*z-index: 999;*/
    border-bottom: 1px solid #d7dae2;
    color: white;
  }
   
 .top-name{
    margin-top: 4rpx;
    font-size: 34rpx;
 }
 .top-address{
    font-size: 28rpx;
    margin-top: 3rpx;
    color: white;
 }


.top-comend {
    width: 100%;
    height: 45px;
}