小程序实现锚点跳转

微信小程序之锚点跳转

最近在学微信小程序制作，照着微信联系人页面做的时候其他的都没有太大问题，但是微信联系人右侧有类似于锚点跳转的模块儿，当时不知道该怎么做，也就知道时锚点跳转，一开始想的是把每个字母都给上id然后用if语句判断实现跳转，可事情不顺利一直都拿不上id的值，当我去百度的时候慢慢的才懂了。

<scroll-view scroll-y style="height: {{height}}px" scroll-into-view="{{toView}}" class="all">
//在这里再加上联系人列表就可以实现锚点跳转了
</scroll-view>

<view class="right-all" >
    <view class="right" wx:for="{{ z }}">
      <view id="right-zimu" class="right-zimu" bindtap="zimu" data-id="{{ item.zimuid }}">{{ item.zimu }}</view>
    </view>
</view>


/js
onLoad: function(e) {
    var that = this
    // console.log(e)
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          height: res.windowHeight
        })
      },
    })
  }

首先我用sscroll-view组件先给它一个滚动的方向scroll-y 给它的高度是整个页面,当时感觉男的也是scroll-into-view这个属性值该怎么拿到看了属性的介绍，这不就是锚点跳转的位置嘛。

var commlzimu = this.data.communicationList[0].title

虽然这样拿到的是锚点跳转的位置但是索引0是给死的，这样肯定是不行的，然后想了想应该用id来控制这个锚点然后就开始尝试给联系人每个字母一个id，然后给右侧锚点跳转的每个字母id，这样让他们的id对应起来，然后使用if语句来控制索引

zimu: function(e) {
    var that = this
      // console.log(e)
      var right = e.target.dataset.id//这里拿到的是右侧字母的id
      console.log(right)
    var zimuid = this.data.communicationList[right].id
    //这里拿到的是页面里字母的id
    console.log(zimuid)
    var commlzimu = this.data.communicationList[right].title
    //这里就可以使用right当作点击的索引，然后调用title属性也就是索要跳转到的字母位置
    console.log(commlzimu)
      if(right==zimuid){
        that.setData({
          toView: commlzimu
        })
      }
  }

communicationList: [{
      id: 0,
      title: 'A',
      list: [{
          "url": "../../img/touxiang1.jpg",
          name: '张三',
          age: 19
        }]
    }]    

小编的能力有限，也是把自己的所学记录一下，也希望此文章可以帮助到那些因为小程序实现锚点跳转问题的童鞋们，有什么问题和建议可以留言给小编，希望我们可以一起成长，下周见啦。