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

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

利用：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中