微信小程序锚点定位楼层跳跃

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

利用：scroll-into-view 来实现

效果图如下：

WXML:

[html]  view plain  copy

 print ?

1. <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">  
2.   <view wx:for="{{act_addList}}">  
3.     <view class="address_top" id="{{ 'inToView'+item.id}}">{{item.region}}</view>  
4.     <view wx:for="{{item.city}}">  
5.       <view class="address_bottom">{{item.name}}</view>  
6.     </view>  
7.   </view>  
8. </scroll-view>  
9.   
10. <view class="orientation_region">  
11.   <view class="orientation">自动定位</view>  
12.   <block wx:for="{{orientationList}}" >  
13.     <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>  
14.   </block>  
15. </view>   

WXSS:

[css]  view plain  copy

 print ?

1. page{ height: 100%;}  
2. .content{padding-bottom: 20rpx; box-sizing: border-box; height: 100%;}  
3. .location{width: 100%;}  
4. .location_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #606660;font-size: 28rpx;padding: 0 20rpx;}  
5. .location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size: 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid;padding: 0 20rpx; align-items: center;display: -webkit-flex;}  
6. .address_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #999999;font-size: 28rpx;padding: 0 20rpx;}  
7. .address_bottom{height: 88rpx;line-height: 88rpx; background: #fff;color: #000000;font-size: 32rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 20rpx;margin-right: 50rpx; }  
8. .location_img{width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 125rpx;}  
9. .add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; }  
10. .add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}  
11. .orientation{white-space:normal;display: inline-block; width: 55rpx;height:58rpx; color: #999; text-align: center;}  
12. .orientation_region{ width: 55rpx;font-size: 20rpx;position: fixed;top: 220rpx; right: 0rpx;}  
13. .orientation_city{height: 50rpx; line-height: 50rpx;color: #000;text-align: center;}  

JS:

[javascript]  view plain  copy

 print ?

1. Page({  
2.   
3.   /** 
4.    * 页面的初始数据 
5.    */  
6.   data: {  
7.     orientationList: [  
8.       { id: "01", region: "东北" },  
9.       { id: "02", region: "华北" },  
10.       { id: "03", region: "华东" },  
11.       { id: "04", region: "华南" },  
12.       { id: "05", region: "华中" },  
13.       { id: "06", region: "西北" },  
14.       { id: "07", region: "西南" }  
15.     ],  
16.     act_addList: [  
17.       {  
18.         id: "01", region: "东北地区",  
19.         city: [{ id: "0101", name: "白山江源" },  
20.         { id: "0102", name: "白山市" },  
21.         { id: "0103", name: "宾县" },  
22.         { id: "0104", name: "大庆" },  
23.         { id: "0105", name: "测试1" },  
24.         { id: "0106", name: "测试2" },  
25.         { id: "0107", name: "测试3" },  
26.         { id: "0108", name: "测试4" },  
27.         { id: "0109", name: "测试5" },  
28.         { id: "0110", name: "测试6" },  
29.         ]  
30.       },  
31.       {  
32.         id: "02", region: "华北地区",  
33.         city: [{ id: "0201", name: "包头" },  
34.         { id: "0202", name: "保定" },  
35.         { id: "0206", name: "测试2" },  
36.         { id: "0207", name: "测试3" },  
37.         { id: "0208", name: "测试4" },  
38.         { id: "0209", name: "测试5" },  
39.         { id: "0210", name: "测试6" },  
40.   
41.         ]  
42.       },  
43.       {  
44.         id: "03", region: "华东地区",  
45.         city: [{ id: "0303", name: "开封市" },  
46.         { id: "3104", name: "安阳市" },]  
47.       },  
48.       {  
49.         id: "04", region: "华南地区",  
50.         city: [  
51.           { id: "0401", name: "黑龙江市" },  
52.           { id: "0407", name: "测试3" },  
53.           { id: "0508", name: "测试4" },  
54.           { id: "0609", name: "测试5" },  
55.           { id: "0710", name: "测试6" },  
56.           { id: "0711", name: "测试8" },  
57.           { id: "0712", name: "测试9" },  
58.           { id: "0713", name: "测试10" },  
59.           { id: "0714", name: "测试11" },  
60.         ]  
61.       },  
62.       { id: "05", region: "华中地区", city: [{ id: "0501", name: "黑龙江市" }] },  
63.   
64.       {  
65.         id: "06", region: "西北地区",  
66.         city: [{ id: "0603", name: "开封市" },  
67.         { id: "0604", name: "安阳市" },]  
68.       },  
69.       {  
70.         id: "07", region: "西南地区",  
71.         city: [{ id: "0703", name: "开封市" },  
72.         { id: "0704", name: "安阳市" },  
73.         { id: "0401", name: "黑龙江市" },  
74.         { id: "0407", name: "测试3" },  
75.         { id: "0508", name: "测试4" },  
76.         { id: "0609", name: "测试5" },  
77.         { id: "0710", name: "测试6" },  
78.         { id: "0711", name: "测试8" },  
79.         { id: "0712", name: "测试9" },  
80.         { id: "0713", name: "测试10" },  
81.         { id: "0714", name: "测试11" },  
82.         { id: "0401", name: "黑龙江市" },  
83.         { id: "0407", name: "测试3" },  
84.         { id: "0508", name: "测试4" },  
85.         { id: "0609", name: "测试5" },  
86.         { id: "0710", name: "测试6" },  
87.         { id: "0711", name: "测试8" },  
88.         { id: "0712", name: "测试9" },  
89.         { id: "0713", name: "测试10" },  
90.         { id: "0714", name: "测试11" },  
91.         ]  
92.       },  
93.     ],  
94.     toView: 'inToView01',  
95.   },  
96.   
97.   scrollToViewFn: function (e) {  
98.     var _id = e.target.dataset.id;  
99.     this.setData({  
100.       toView: 'inToView' + _id  
101.     })  
102.     console.log(this.data.toView)  
103.   
104.   },  
105.   onLoad: function (options) {  
106.   
107.   }  
108.   
109.   
110. })