微信小程序顶部导航跟随内容高亮,点击跳转对应分类区域

本文由清尘发表于2020-06-22 11:14最后修改于2020-06-23属于移动前端分类
...
<view class="hb_height">
    <view class="hb_nav {{fix_nav}}" id="hb_nav">
        <view wx:for="{{carousel_ads}}" wx:key="index" class="sx_li {{hb_index == index?'sx_on':''}}" data-t=""
              data-i="{{index}}" catchtap='hbNavClick'>{{item.title}}
            <view class="hb_sub">{{item.desc}}</view>
        </view>
    </view>
</view>
...
<view id="gbox">
    <block wx:for="{{carousel_ads}}" wx:for-item="pItem" wx:key="index">
        <view id="nv_cnt{{index}}">
            <view class="goods_box_bar">{{pItem.title}}</view>
            <view wx:for="{{pItem.ads}}" wx:for-item="ads" wx:key="index" class="hm_box">
                <navigator url="{{ads.ad_link}}" class="block" hover-class="none">
                    <image src="{{ads.ad_code}}" class='ht_img'/>
                </navigator>
            </view>
            <view class="goods_box">
                <view wx:for="{{pItem.goods}}" wx:for-item="goods" wx:key="goods_id" class="goods_list">
                    <navigator url="../goods/goods?id={{goods.goods_id}}" hover-class="none">
                        <image src="{{goods.goods_thumb}}" lazy-load="true" class="goods_img"></image>
                        <view class="goods_name">{{goods.goods_name}}</view>
                        <view class="goods_tag">
                            <text class="g_tgs">{{goods.keywords}}</text>
                        </view>
                        <view class="goods_b">
                            <view class="price">
                                <text class="rmb">¥</text>
                                <text class="red">{{goods.shop_price}}</text>
                            </view>
                
                        </view>
                    </navigator>
                </view>

            </view>

        </view>
    </block>


</view>

...
Page({
  data:{
    highlightArr: [],
  },
  onLoad:function(){
    this.scrollspy();  //动态渲染的数据,必须放在ajax请求完成之后执行函数
  },
  onPageScroll: function (e) {
    var i = this.data.goTop_show;
    var nt = this.data.bnav_top;
    var highlightArr = this.data.highlightArr;
    var that = this;
    if (e.scrollTop > 500) {
        if (!i) {
            this.setData({goTop_show: true});
        }
    } else {
        if (i) {
            this.setData({goTop_show: false});
        }
    }
    if (e.scrollTop >= nt) {
        this.setData({
            fix_nav: 'nav_fixed'
        });
    } else {
        this.setData({
            fix_nav: ''
        });
    }

    highlightArr.forEach(function (ele, i) {
        var scrollTop = e.scrollTop + 100;
        if (scrollTop >= ele.top && scrollTop < ele.bottom) {
            // console.log(`进入第${i}个元素`)
            that.setData({
                hb_index: i
            })
        }
    })


},
  ...
  hbNavClick: function (e) {
    var index = e.currentTarget.dataset.i;
    var goTop_h = (this.data.highlightArr[index].top) - 50;
    wx.pageScrollTo({scrollTop: goTop_h});
    // if(this.data.hb_index == index){
    //   return;
    // }
    // this.setData({
    //   hb_index:index
    // })

},
  scrollspy: function () {
    var scroll_arr = (this.data.carousel_ads).length,
        highlightArr = [],
        that = this;

    for (var i = 0; i < scroll_arr; i++) {
        var eleId = `#nv_cnt${i}`,
            temArr = [];
        wx.createSelectorQuery().select(eleId).boundingClientRect(function (rect) {
            if (rect) {
                temArr.push({
                    top: rect.top,
                    bottom: rect.bottom
                })
                that.setData({
                    highlightArr: highlightArr.concat(temArr)
                })
                // console.log(that.data.highlightArr)
            }
        }).exec();

    }
},
  ...
})