美文网首页
小程序 锚点

小程序 锚点

作者: 糖醋里脊120625 | 来源:发表于2023-10-25 17:26 被阅读0次
<view class="tab-box" >
    <van-sticky offset-top="{{ 50 }}">
        <van-tabs active="{{ active }}" bind:change="ChangeTab">
            <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">
                        <text >{{each.salesVarieties}}</text>
                        <!-- <text >{{item.baohan}}</text> -->
                    </view>
                </view>
                
                <view wx:if="{{ item.stalls.length==0 }}" class="none-text">待入驻...</view>
            </view>
        </view>
    </view>
</scroll-view>
// pages/market/market.js

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

const app = getApp()
Page({

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

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getMarket()
    },
    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){
        let scrollTop = e.detail.scrollTop
        var _this = this
        let scrollArr = _this.data.anchorArray;
        for (let i = 0; i < scrollArr.length; i++) {
            if(scrollTop >= 0 && scrollTop < scrollArr[0]) {
                _this.setData({
                    active: 0,
                });
            } else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]){
                _this.setData({
                    active: i,
                });
            }
        }
        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)
            this.setData({
              marketList: resData.areas,
              topName:resData.name,
              topAddress:resData.address,
            })
          
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
      const tabBar = this.getTabBar()
      tabBar.setData({
        TabBarActive: 0
      })
    },
    ChangeTab(event){
      let indexSeled =Number(event.detail.index)
      console.log(indexSeled)

      this.setData({
        intoindex:'intoindex'+indexSeled
      })
      console.log(this.data.toView)
    
    },
    /**
     * 生命周期函数--监听页面显示
     */


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

    },

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

    },

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

    },

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

    },

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

    }
})


代码块

相关文章

网友评论

      本文标题:小程序 锚点

      本文链接:https://www.haomeiwen.com/subject/qnweidtx.html