小程序仿淘宝商品详情头部导航

小程序仿淘宝商品详情头部导航

使用的是scroll-view 组件的scroll-into-view，回到某个位置 和bindscroll滚动监听 。并利用wx.createSelectorQuery()获取位置

wxml部分代码如下：

   
   
   ——宝贝详情——
  

js部分代码如下：

 // 监听滚动事件
  bindscroll(e) {
    let _this = this;
    let query = wx.createSelectorQuery()
    query.select('#anchor2').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      if (res[0].top > 0) {
        _this.setData({
          hiddenNav:true
        })
      } else {
        _this.setData({
          hiddenNav: false
        })
      }

    })
    query.select('#anchor3').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      if (res[2].top > 0) {
        _this.setData({
          navId: 1
        })
      } else {
        _this.setData({
          navId: 2
        })
      }
    })
  },
  toScroll(e) {
    let index = e.currentTarget.dataset.index
    let mmp = ''
    switch (index) {
      case 0:
        mmp = 'anchor1'
        break;
      case 1:
        mmp = 'anchor2'
        break;
      case 2:
        mmp = 'anchor3'
        break;
      default:
        break
    }
    this.setData({
      toview: mmp
    })
  },

下班了，还得赶回去，不写了