1.wxml布局樣式

<view class='container'><view class='left'><scroll-view class='leftScroll' scroll-y><block wx:for="{{list}}" wx:key="list"><view bindtap='clickScroll' data-id="{{item}}">{{item}}</view></block></scroll-view></view><view class='right'><scroll-view class='rightScroll' scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true"><block wx:for="{{list}}" wx:key="list"><view bindtap='clickScroll' id="{{item}}">{{item}}</view></block></scroll-view></view></view>

2.wscc樣式

page{width:100%;height:100%;}.container{flex-direction: row;height:100%;}.left{width:100px;height:80%;}.left scroll-view{height:100%;}.left view{padding:10px;text-align: center;background-color:#0f0;margin-bottom:10px;color:#fff;}.right{flex:1;height:80%;}.right scroll-view{height:100%;}.right view{height:150px;background-color:#f00;color:#fff;margin-bottom:10px;}

3.js

Page({ data: {list: ["list0", "list1", "list2", "list3", "list4", "list5", "list11", "list12", "list13", "list14", "list15", "list25", "list26", "list27", "list28", "list29", "list30"],toView: ''},clickScroll:function(e){var id = e.currentTarget.dataset.idthis.setData({toView:id})console.log(e.currentTarget.dataset);},})

?

轉載于:https://www.cnblogs.com/yuan9580/p/11344007.html

總結

以上是生活随笔為你收集整理的微信小程序实现web端锚点功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。