微信小程序锚点联动开发

先看效果图--下拉操作

点击操作

应用微信小程序 scroll-view组件

开发思路可规划为左侧触发右侧，右侧触发左侧

左侧触发右侧：

1.在data中设置变量 toView: null(之后会用到);

2.在左侧按钮列添加点击事件 bindtap="toViewFun";

3.写toViewFun函数

toViewFun: function (e) {

    var _id = e.target.dataset.id;  //_id左侧按钮的id

    this.setData({ 

     toView: 'inToView' + _id    //inToView是标识前缀

    })

   }, 

4.使用scroll-view组件，代码

<scroll-view class="content" bindscroll="right" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"></scroll-view>

注意：class="content"高度不能超过父容器

使用上面的scroll-view标签包裹左侧数据集合赋予scroll-view组件操作数据

当两者id相同时则左侧触发右侧置顶显示

注意：inToView这个前缀可以自定义主要是通过toViewFun函数修改toView值当toView等于右侧view的id值就完成效果了

网络上或官网上介绍锚点这一功能都很大略，希望这篇文章可以有帮助，我也是查很多网络论坛和分析做出来的，“取之于民，用之于民”，写篇文章回馈网络。