微信小程序实现锚点跳转

微信小程序实现锚点跳转

wxml

<view class="list">
    <view bindtap='jumpTo' data-opt="list0">list0</view>
    <view bindtap='jumpTo' data-opt="list11">list11</view>
    <view bindtap='jumpTo' data-opt="list30">list30</view>
</view>
<scroll-view  scroll-into-view="{{toView}}"  scroll-y="true"   scroll-with-animation="true"   class="scr">
    <view wx:for="{{list}}"  id="{{item}}"  class="test">
      {{item}}
    </view>
</scroll-view>

wxss

.scr {
  position: relative;
  height: 100vh
}

.test {
  height: 80rpx;
  line-height: 80rpx;
}

.list {
  position: fixed;
  z-index: 9;
  top: 30rpx;
  right: 10rpx;
}

js

Page({
  data: {
    list: ["list0", "list1", "list2", "list3", "list4", "list5", "list11", "list12", "list13", "list14", "list15", "list25", "list26", "list27", "list28", "list29", "list30"],
    toView: ''
  },
  jumpTo: function (e) {
    // 获取标签元素上自定义的 data-opt 属性的值
    let target = e.currentTarget.dataset.opt;
    this.setData({
      toView: target
    })
  },
})