小程序锚点定位（通讯录）

1.使用视图容器组件scroll-view

2.在scroll-view中设置属性scroll-into-view，属性值为锚点id

3.在需要的位置设置锚点ID值，点击后将scroll-into-view设置为对应的id即可跳转

示例：名字列表定位

 wxml

<scroll-view 
    class="list" 
    style="height: {{listHeight}}rpx" 
    scroll-into-view="{{toView}}" 
    scroll-y="true"
>
    <block 
        wx:for="{{letter}}" 
        wx:key="index" 
        wx:for-item="letter" 
        wx:for-index="index0"
    >
        <view 
            class="list-letter" 
            id="{{letter}}"
        >{{letter}}</view>
        <view class="list-card">
            <view 
                class="item" 
                wx:for="{{studentList[letter]}}" 
                wx:key="index" 
                wx:for-item="student" 
                wx:for-index="index1"
            >
                <image 
                    class="avatar" 
                    src="{{student.avatarurl}}" 
                    bindtap="s_clickStudent" 
                    data-item="{{student}}"
                ></image>
                <view class="name">
                    <view class="name-text">
                        {{student.real_name || student.nickname}}
                    </view>
                    <view class="name-time">{{student.created_at}}加入</view>
                </view>
                <view bindtap="delete" data-student-id="{{student.student_id}}" class="wrapper">
                    <text wx:if="{{!readyToBind}}" data-student-id="{{student.student_id}}" class="delete">删除</text>
                </view>
            </view>
        </view>
    </block>
    <view class="letter-right">
        <block wx:for="{{letter}}" wx:key="index">
            <view 
                class="letter-text {{toView==item && 'sel'}}" 
                bind:tap="goView"
                data-letter="{{item}}"
            >{{item}}</view>
        </block>
    </view>
</scroll-view>

js

Page({
  data: {
    studentList: [],
    toView: "",
  },
  onLoad(options) {},
  onShow() { },
   goView(e) {
    const { letter } = e.target.dataset;
    this.setData({
      toView: letter,
    });
  },
});

注意点：

1. scroll-y="true”需要放在scroll-into-view之后

2.scroll-into-view的属性值只支持字母、数字、下划线