转：【微信小程序】实现锚点定位楼层跳跃的实例

微信小程序实现楼层锚点跳跃，点击不同的锚点进行位置跳跃： 

利用：scroll-into-view 来实现；

效果图：  

 

wxml：

<scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> 
 <view wx:for="{{act_addList}}"> 
  <view class="address_top" id="{{ 'inToView'+item.id}}">{{item.region}}</view> 
 </view> 
</scroll-view> 

<view class="orientation_region"> 
 <block wx:for="{{orientationList}}" > 
  <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view> 
 </block> 
</view>

JS：

Page({ 
 /** 
  * 页面的初始数据 
  */
 data: { 
  orientationList: [ 
   { id: "01", region: "东北" }, 
   { id: "02", region: "华北" }, 
   { id: "03", region: "华东" }, 
   { id: "04", region: "华南" },
  ], 

  toView: 'inToView01',
}
scrollToViewFn: function (e) { 
  var _id = e.target.dataset.id; 
  this.setData({ 
   toView: 'inToView' + _id 
  }) 
  console.log(this.data.toView) 
 }, 
 onLoad: function (options) { 
 } 

}) 

3、原理：通过点击瞄点，获取瞄点的id，传给瞄点对应的<view id="{{瞄点id}}">的div，

然后在scorll-view的滚动中，自动跳跃到对应的子div中