小程序模板網(wǎng)

微信小程序仿APP section header 懸停效果

發(fā)布時(shí)間:2018-07-21 08:52 所屬欄目:小程序開(kāi)發(fā)教程

很多APP都有這么一個(gè)效果,列表頭在滾動(dòng)到頂部時(shí)會(huì)懸停在頂部,比如在iOS開(kāi)發(fā)中UITableview設(shè)置 style 屬性設(shè)置為 Plain ,這個(gè)tableview的section header在滾動(dòng)時(shí)會(huì)默認(rèn)懸停在界面頂端。

那么我們?cè)趺丛谖⑿判〕绦蛞矊?shí)現(xiàn)這么一個(gè)效果呢? 
首先寫一個(gè)非常簡(jiǎn)單列表:

wxml代碼

 

				
  1. <view class='header'>這里是header</view>
  2. <view class='section-header'>這是section-header</view>
  3. <block wx:for="{{testData}}">
  4. <view class='section-cell'>{{item}}</view>
  5. </block>

wxss代碼

 

				
  1. .header {
  2. height: 300rpx;
  3. width: 750rpx;
  4. background-color: bisque;
  5. margin-bottom: 10rpx;
  6. }
  7.  
  8. .section-header {
  9. height: 80rpx;
  10. width: 750rpx;
  11. background-color: rebeccapurple;
  12. }
  13.  
  14. .section-cell {
  15. height: 180rpx;
  16. width: 750rpx;
  17. background-color: gold;
  18. margin-top: 10rpx;
  19. }

簡(jiǎn)單列表效果.png  那我們要怎么樣讓頭部懸停呢?

1、我們需要在頁(yè)面布局完成后獲取到頭部的位置:

在onReady方法中,查詢section-header節(jié)點(diǎn)并拿到該節(jié)點(diǎn)此時(shí)距離當(dāng)前頂部的距離

注意是 此時(shí),這個(gè)后面再講

 

				
  1. /**
  2. * 頁(yè)面加載完成
  3. */
  4. onReady: function () {
  5. let that = this
  6. let query = wx.createSelectorQuery()
  7. query.select(".section-header").boundingClientRect(function (res) {
  8. // console.log(res)
  9. that.setData({
  10. //section header 距離 ‘當(dāng)前頂部’ 距離
  11. sectionHeaderLocationTop: res.top
  12. })
  13. }).exec()
  14. },

2、我們需要監(jiān)聽(tīng)頁(yè)面滾動(dòng):

fixed用來(lái)控制是否懸停

 

				
  1. /**
  2. * 頁(yè)面滾動(dòng)監(jiān)聽(tīng)
  3. */
  4. onPageScroll: function (e) {
  5. //console.log(e)
  6. this.setData({
  7. scrollTop: e.scrollTop
  8. })
  9. if (e.scrollTop > this.data.sectionHeaderLocationTop) {
  10. this.setData({
  11. fixed: true
  12. })
  13. } else {
  14. this.setData({
  15. fixed: false
  16. })
  17. }
  18. },

3、修改相應(yīng)的樣式:

將原來(lái)的header修改為如下代碼,并添加一個(gè)placeholder視圖,目的是當(dāng)我們的section-header視圖懸停時(shí),保持占位,避免頁(yè)面抖動(dòng)

 

				
  1. <view class='{{fixed ? "section-header section-fixed": "section-header"}}'>這是section-header</view>
  2. <view hidden='{{!fixed}}' class="section-header section-placeholder"></view>

增加wxss代碼

 

				
  1. .section-placeholder {
  2. background-color: white;
  3. }
  4.  
  5. .section-fixed {
  6. position: fixed;
  7. top: 0;
  8. }

附上js data 代碼:

 

				
  1. data: {
  2. testData:[1,2,3,4,5,6,7,8,9,10],
  3. //section header 距離 ‘當(dāng)前頂部’ 距離
  4. sectionHeaderLocationTop: 0,
  5. //頁(yè)面滾動(dòng)距離
  6. scrollTop: 0,
  7. //是否懸停
  8. fixed: false
  9. },

此時(shí)我們需要的效果就實(shí)現(xiàn)了:

sectionHeader懸浮.gif  這個(gè)有一個(gè)要注意的點(diǎn),我們?cè)谑褂胹wlectorQuery()的時(shí)候,獲取到的top是當(dāng)前調(diào)用改函數(shù)時(shí)相應(yīng)節(jié)點(diǎn)對(duì)應(yīng)當(dāng)前頂部的距離,這就有一個(gè)問(wèn)題,當(dāng)我們的header的高度(不一定是header只要是section-header上面的視圖的高度)發(fā)生變化的時(shí)候,懸停就會(huì)有問(wèn)題,因?yàn)槲覀兊母叨仁亲铋_(kāi)始的時(shí)候獲取的。

所以在我們改變高度之后,要再次調(diào)用該函數(shù)去獲取距離"當(dāng)前頂部"的距離,這也是要注意的一個(gè)點(diǎn),如果我能直接再次獲取并賦值,發(fā)現(xiàn)還是有問(wèn)題,就是因?yàn)榇藭r(shí)獲取的top不是距離整個(gè)page頁(yè)面頂部,而我們監(jiān)聽(tīng)的頁(yè)面滾動(dòng)卻是,所以我們可以修改代碼如下:

 

				
  1. let that = this
  2. let query = wx.createSelectorQuery()
  3. query.select(".section-header").boundingClientRect(function (res) {
  4. // console.log(res)
  5. that.setData({
  6. //section header 距離 ‘當(dāng)前頂部’ 距離
  7. sectionHeaderLocationTop: res.top + that.data.scrollTop
  8. })
  9. }).exec()

加上此時(shí)頁(yè)面滾動(dòng)的距離,則能保證我們預(yù)期的效果出現(xiàn)?。。。?/p>



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24649.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢