开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言

掘友们，大家好啊，小编近日搭建的微信小程序（就是写着玩的），今天可算是有点进度了，哈哈。微信小程序已经很久没有写过项目了，就是想搭配着自己的后台管理系统，好好的练练手，拿来熟悉一下。毕竟技术是自己的，不用的话，时间久了，就会忘记，还是要时不时的拿个项目练练手。

项目需求

小编使用的开发工具是微信开发者工具，搭配TDesign-ui库。这里说明一下，如果有想要搭建微信小程序的掘友，建议避免选择这个UI库了，原因很简单，UI选择界面，动不动浏览器就崩溃了。好了步入正题，小编也只是给大家吐槽一下。

功能实现

微信点餐小程序，必不可少的就是菜单项，那么如何实现锚点导航栏的定位呢？（UI库也有，但是基本都是通过点击操作实现的，并不是滚动锚点定位）。

这里是使用scroll-view标签控制滚动，前提是scroll-view有固定的高度，给左侧标签添加scroll-y scroll-with-animation属性，给滚动的元素绑定bindscroll方法，滚动时获取滚动位置，赋值固定id

html

<view class='box'>
    <scroll-view scroll-y scroll-with-animation style="width:25%">
        <view class='nav'>
            <view wx:for="{{navList}}" wx:key='index' class="title {{index == active ?'select':''}}"
                data-index='{{index}}' bindtap='activeNav'>{{item}}</view>
        </view>
    </scroll-view>
    <scroll-view scroll-y style="width:75%" scroll-with-animation scroll-into-view="{{selectId}}"
        bindscroll="watchScroll">
        <view class='content'>
            <view id='{{"item"+index}}' class='subtitle' wx:for="{{navList}}" wx:key='index'>{{item}}</view>
        </view>
    </scroll-view>
</view>

css

/* pages/home3/home3.wxss */
.box {
    display: flex;
  }
  .nav {
    height: 100%;
    width: 100%;
    background: #F5F5F5;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
  
  .title {
    box-sizing: border-box;
    width: 100%;
    padding: 32rpx;
    font-size: 28rpx;
  }
  
  .select {
      background: #fff;
      border-left: 5rpx solid #eec718;
      box-sizing: border-box;
  }
  
  .content {
      padding: 0 30rpx;
      box-sizing: border-box;
      width: 100%;
      height: 100vh;
  }
  
  .subtitle {
      width: 100%;
      height: 650rpx;
      border-bottom: 10rpx #f5f5f5 solid;
  }

Page({
  data: {
    heightArr: [],
    distance: 0,
    active: 0,
    selectId: "item0",
    navList: ['全部甜品', '今日甜品系列', '毛巾卷系列', '切块系列', '限时限量系列', '提拉米苏系列']
  },

  onLoad: function (options) {
    this.selectHeight();
  },

  // 选择左侧标签锚点定位
  activeNav(e) {
    var index = e.currentTarget.dataset.index
    this.setData({
      active: index,
      selectId: "item" + index
    })
  },

  //计算右侧每个锚点的高度
  selectHeight() {
    var list = []
    var height = 0;
    const query = wx.createSelectorQuery();
    query.selectAll('.subtitle').boundingClientRect()
    query.exec((res) => {
      res[0].forEach((item) => {
        height += item.height;
        list.push(height)
      })
      this.data.heightArr = list
    })
  },

  //监听scroll-view的滚动事件
  watchScroll(e) {
    let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
    let active = this.data.active;
    if (scrollTop >= this.data.distance) {
      if (active + 1 < this.data.heightArr.length && scrollTop >= this.data.heightArr[active]) {
        this.setData({
          active: active + 1
        })
      }
    } else {
      if (active - 1 >= 0 && scrollTop < this.data.heightArr[active - 1]) {
        this.setData({
          active: active - 1
        })
      }
    }
    this.data.distance = scrollTop;
  }
})

结尾

以上就是小程序利用锚点定位实现商品的滚动定位，希望对大家有所帮助。

微信小程序实现锚点导航栏

前言

项目需求

功能实现

结尾