本文實(shí)例講述了微信小程序?qū)Ш綑诨瑒?dòng)定位功能。分享給大家供大家參考，具體如下：

實(shí)現(xiàn)的效果

實(shí)現(xiàn)的原理

1. 通過對(duì)scroll的監(jiān)聽獲取滾動(dòng)條的scrollTop值;

2. 在導(dǎo)航的class判斷scrollTop;

3. 切換position:fixed與position:relative。

WXML

<view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;">  <view class="page-bottom-content">   <text>{{text}}</text>  </view>  <view class="page-banner">   banner  </view>  <view class="page-group {{scrollTop > 360 ? 'page-group-position' : ''}}">   <view class="page-nav-list"><text>首頁(yè)</text></view>   <view class="page-nav-list"><text>活動(dòng)</text></view>   <view class="page-nav-list"><text>菜單</text></view>   <view class="page-nav-list"><text>我的</text></view>  </view>  <view class="goods-list">   goods-list  </view> </scroll-view></view>

WXCSS

.page-banner{height: 500rpx;background-color: greenyellow;padding: 20rpx;color:#fff;}.page-group{ display: table; background-color: blueviolet; width: 100%; table-layout: fixed; position: relative; top: 0; left: 0;}.page-group-position{ position: fixed;}.page-nav-list{ padding:30rpx 0 ; display: table-cell; text-align: center; color: #fff;}.goods-list{ height: 2000rpx; background-color: green; padding: 20rpx; color:#fff;}

JS

Page({ data: {  scrollTop: null }, //滾動(dòng)條監(jiān)聽 scroll: function (e) {  this.setData({ scrollTop: e.detail.scrollTop }) },})

總結(jié)：

1. 要獲取scrollTop，在微信小程序中我們需要:<scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;"></scroll-view>；

2. 微信小程序要綁定bindscroll事件，需要綁定在scroll-view組件上，同時(shí)設(shè)置scroll-y和height。

3. 如果scroll-view的高設(shè)置100%，就需要在其外層添加一個(gè)固定高的盒子，否則監(jiān)聽不會(huì)生效。

4. 通過scroll事件獲取scrollTop:this.setData({ scrollTop: e.detail.scrollTop })

5. 導(dǎo)航欄class的切換：

scrollTop > 360 ? 'page-group-position' : ''

實(shí)質(zhì)：

scrollTop > 360 ? 'fixed' : 'relative'

缺點(diǎn)：

1. 由于有獲取scrollTop的過程，所以會(huì)出現(xiàn)定位不及時(shí)，也就是導(dǎo)航閃動(dòng)的效果；
2. 沒有原生CSS3的position:sticky流暢，體驗(yàn)比較差；
3. 由于我目前還未找到直接獲取page-group的offsetTop方法，所以直接采用的是360固定值，此效果是在蘋果6進(jìn)行的測(cè)試。