微信小程序实现锚点定位

admin

锚点定位利用：scroll-into-view 来实现
wxml

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. <view class="orientation_region">
   
10.   <view class="orientation">自动定位</view>
    
11.   <block wx:for="{{orientationList}}" >
    
12.     <block wx:if="{{curCid == item.id}}">
    
13.       <view class="orientation_city orientation_select" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>
    
14.     </block>
    
15.     <block wx:else>
    
16.       <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>
    
17.     </block>
    
18.   </block>
    
19. </view>

复制代码

js

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

复制代码

wxss

1. page {
   
2.   height: 100%;
   
3. }
   
4. 
   
5. .content {
   
6.   padding-bottom: 20rpx;
   
7.   box-sizing: border-box;
   
8.   height: 100%;
   
9. }
   
10. 
    
11. .location {
    
12.   width: 100%;
    
13. }
    
14. 
    
15. .location_top {
    
16.   height: 76rpx;
    
17.   line-height: 76rpx;
    
18.   background: #f4f4f4;
    
19.   color: #606660;
    
20.   font-size: 28rpx;
    
21.   padding: 0 20rpx;
    
22. }
    
23. 
    
24. .location_bottom {
    
25.   height: 140rpx;
    
26.   line-height: 140rpx;
    
27.   color: #d91f16;
    
28.   font-size: 28rpx;
    
29.   border-top: 2rpx #ebebeb solid;
    
30.   border-bottom: 2rpx #ebebeb solid;
    
31.   padding: 0 20rpx;
    
32.   align-items: center;
    
33.   display: -webkit-flex;
    
34. }
    
35. 
    
36. .address_top {
    
37.   height: 76rpx;
    
38.   line-height: 76rpx;
    
39.   background: #f4f4f4;
    
40.   color: #999999;
    
41.   font-size: 28rpx;
    
42.   padding: 0 20rpx;
    
43. }
    
44. 
    
45. .address_bottom {
    
46.   height: 88rpx;
    
47.   line-height: 88rpx;
    
48.   background: #fff;
    
49.   color: #000000;
    
50.   font-size: 32rpx;
    
51.   padding: 0 20rpx;
    
52.   border-bottom: 2rpx #ebebeb solid;
    
53.   margin-left: 20rpx;
    
54.   margin-right: 50rpx;
    
55. }
    
56. 
    
57. .location_img {
    
58.   width: 48rpx;
    
59.   height: 48rpx;
    
60.   position: absolute;
    
61.   right: 20rpx;
    
62.   top: 125rpx;
    
63. }
    
64. 
    
65. .add_city {
    
66.   width: 228rpx;
    
67.   height: 60rpx;
    
68.   line-height: 60rpx;
    
69.   text-align: center;
    
70.   border: 2rpx solid #ebebeb;
    
71.   color: #000000;
    
72.   margin-right: 20rpx;
    
73. }
    
74. 
    
75. .add_citying {
    
76.   width: 228rpx;
    
77.   height: 60rpx;
    
78.   line-height: 60rpx;
    
79.   text-align: center;
    
80.   border: 2rpx solid #09bb07;
    
81.   color: #09bb07;
    
82.   margin-right: 20rpx;
    
83. }
    
84. 
    
85. .orientation {
    
86.   white-space: normal;
    
87.   display: inline-block;
    
88.   width: 55rpx;
    
89.   height: 58rpx;
    
90.   color: #999;
    
91.   text-align: center;
    
92. }
    
93. 
    
94. .orientation_region {
    
95.   width: 55rpx;
    
96.   font-size: 20rpx;
    
97.   position: fixed;
    
98.   top: 220rpx;
    
99.   right: 0rpx;
    
100. }
     
101. 
     
102. .orientation_city {
     
103.   height: 50rpx;
     
104.   line-height: 50rpx;
     
105.   color: #000;
     
106.   text-align: center;
     
107. }
     
108. 
     
109. .orientation_select {
     
110.   color: #ff0000;
     
111. }

复制代码

admin

疑问：当锚点位置在界面的最顶端的时候，如何实时改变锚点楼层的选中状态；这个坑记得要填上！

这里需要计算楼层距离界面顶部位置：具体可以在参考这里得到思考：
WXML节点信息：http://mp.weixin.qq.com/debug/wxadoc/dev/api/wxml-nodes-info.html

admin

admin 发表于 2017-7-20 18:56
疑问：当锚点位置在界面的最顶端的时候，如何实时改变锚点楼层的选中状态；这个坑记得要填上！

这里需要计 ...

前来填坑，献上完美解决方案，重点还是上面说的WXML节点信息
还需要思考的是：如果展示数据量很大呢？一下加载全部显然不是最优的，看来滚动分页这个坑，还是得继续往下填！

WXML

1. <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="itemScroll">
   
2.   <view wx:for="{{act_addList}}">
   
3.     <view class="address_top items_wrap {{ 'cateGory'+item.id}}" 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. <view class="orientation_region">
   
10. <view class="orientation">自动定位</view>
    
11.   <block wx:for="{{orientationList}}" >
    
12.     <block wx:if="{{curCid == 'inToView'+item.id}}">
    
13.       <view class="orientation_city orientation_select" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>
    
14.     </block>
    
15.     <block wx:else>
    
16.       <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>
    
17.     </block>
    
18.   </block>
    
19. </view>

复制代码

JS

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

复制代码

WXSS

1. page {
   
2.   height: 100%;
   
3. }
   
4. 
   
5. .content {
   
6.   padding-bottom: 20rpx;
   
7.   box-sizing: border-box;
   
8.   height: 100%;
   
9. }
   
10. 
    
11. .location {
    
12.   width: 100%;
    
13. }
    
14. 
    
15. .location_top {
    
16.   height: 76rpx;
    
17.   line-height: 76rpx;
    
18.   background: #f4f4f4;
    
19.   color: #606660;
    
20.   font-size: 28rpx;
    
21.   padding: 0 20rpx;
    
22. }
    
23. 
    
24. .location_bottom {
    
25.   height: 140rpx;
    
26.   line-height: 140rpx;
    
27.   color: #d91f16;
    
28.   font-size: 28rpx;
    
29.   border-top: 2rpx #ebebeb solid;
    
30.   border-bottom: 2rpx #ebebeb solid;
    
31.   padding: 0 20rpx;
    
32.   align-items: center;
    
33.   display: -webkit-flex;
    
34. }
    
35. 
    
36. .address_top {
    
37.   height: 76rpx;
    
38.   line-height: 76rpx;
    
39.   background: #f4f4f4;
    
40.   color: #999999;
    
41.   font-size: 28rpx;
    
42.   padding: 0 20rpx;
    
43. }
    
44. 
    
45. .address_bottom {
    
46.   height: 88rpx;
    
47.   line-height: 88rpx;
    
48.   background: #fff;
    
49.   color: #000000;
    
50.   font-size: 32rpx;
    
51.   padding: 0 20rpx;
    
52.   border-bottom: 2rpx #ebebeb solid;
    
53.   margin-left: 20rpx;
    
54.   margin-right: 50rpx;
    
55. }
    
56. 
    
57. .location_img {
    
58.   width: 48rpx;
    
59.   height: 48rpx;
    
60.   position: absolute;
    
61.   right: 20rpx;
    
62.   top: 125rpx;
    
63. }
    
64. 
    
65. .add_city {
    
66.   width: 228rpx;
    
67.   height: 60rpx;
    
68.   line-height: 60rpx;
    
69.   text-align: center;
    
70.   border: 2rpx solid #ebebeb;
    
71.   color: #000000;
    
72.   margin-right: 20rpx;
    
73. }
    
74. 
    
75. .add_citying {
    
76.   width: 228rpx;
    
77.   height: 60rpx;
    
78.   line-height: 60rpx;
    
79.   text-align: center;
    
80.   border: 2rpx solid #09bb07;
    
81.   color: #09bb07;
    
82.   margin-right: 20rpx;
    
83. }
    
84. 
    
85. .orientation {
    
86.   white-space: normal;
    
87.   display: inline-block;
    
88.   width: 55rpx;
    
89.   height: 58rpx;
    
90.   color: #999;
    
91.   text-align: center;
    
92. }
    
93. 
    
94. .orientation_region {
    
95.   width: 55rpx;
    
96.   font-size: 20rpx;
    
97.   position: fixed;
    
98.   top: 220rpx;
    
99.   right: 0rpx;
    
100. }
     
101. 
     
102. .orientation_city {
     
103.   height: 50rpx;
     
104.   line-height: 50rpx;
     
105.   color: #000;
     
106.   text-align: center;
     
107. }
     
108. 
     
109. .orientation_select {
     
110.   color: #ff0000;
     
111. }

复制代码