這篇文章主要介紹了小程序怎么實(shí)現(xiàn)下拉刷新，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括興國網(wǎng)站建設(shè)、興國網(wǎng)站制作、興國網(wǎng)頁制作以及興國網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，興國網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到興國省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

enablePullDownRefresh

enablePullDownRefresh是最容易實(shí)現(xiàn)下拉刷新的方法，在json文件中將enablePullDownRefresh設(shè)置為true，在Page中監(jiān)聽onPullDownRefresh事件即可，支持點(diǎn)擊頂部標(biāo)題欄回到頂部，自定義標(biāo)題欄時會失效，還可以通過直接調(diào)用wx.startPullDownRefresh()觸發(fā)下拉刷新事件，產(chǎn)生下拉刷新動畫，處理完下拉刷新中的數(shù)據(jù)更新后調(diào)用wx.stopPullDownRefresh()結(jié)束動畫即可。

這種形式的下拉刷新的優(yōu)點(diǎn)很明顯就是簡單，沒有限制，但是缺點(diǎn)也同樣明顯：

• 下拉動畫太過簡單，交互不夠優(yōu)雅且不能自定義下拉動畫

• 當(dāng)自定義標(biāo)題欄時，fixed定位，在Android下標(biāo)題欄也會被一起下拉

scroll-view

scroll-view是官方的一個滾動視圖組件，使用很簡單，想要設(shè)置上拉刷新代碼如下：

<scroll-view class="scroll" scroll-y bindscrolltoupper="refresh">
  <view class="content">content</view>
</scroll-view>

想要利用scroll-view實(shí)現(xiàn)上拉刷新，需要注意：

• 一定要給scroll-view設(shè)置固定高度，否則監(jiān)聽事件不會觸發(fā)

• 設(shè)置縱向滾動scroll-y

• scroll-view內(nèi)的內(nèi)容高度一定要比scroll-view高度要高，否則無法產(chǎn)生縱向滾動，就無法觸發(fā)監(jiān)聽事件

scroll-view缺點(diǎn)：

• 由于iOS有橡皮筋效果，因此最終效果會與Android有一定的差異

• 剛打開頁面時上拉是無法觸發(fā)上拉監(jiān)聽事件，需要先向下滾動，觸發(fā)滾動，然后再上拉滾動才能觸發(fā)監(jiān)聽事件

• 當(dāng)有自定義頭部時，scroll-view需要一個高度計算，減去頭部高度

scroll-view優(yōu)點(diǎn)：

• 可以自定義加載動畫

• 代碼相對簡單

• 相對enablePullDownRefresh，scroll-view對滾動列表控制更加方便：

• scroll-into-view：滾動到指定元素

• enable-back-to-top：iOS點(diǎn)擊頂部狀態(tài)欄、安卓雙擊標(biāo)題欄時，滾動條返回頂部，只支持豎向，且當(dāng)自定義標(biāo)題欄后就會失效

官方并不推薦使用scroll-view做下拉刷新，官方文檔上有這樣一個tip

自定義下拉刷新

自定義下拉刷新最主要希望解決的問題還是在Android使用enablePullDownRefresh時fixed定位的標(biāo)題欄或?qū)Ш綑跁幌吕膯栴}，同時兩端在下拉刷新時的動畫保持一致，其實(shí)實(shí)現(xiàn)起來并不難，接下來就看看具體實(shí)現(xiàn):
wxml:

<view class="scroll" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  <view class="animation">
    <view class="loading"></view>
    <text class="tip">{{state === 0 ? '下拉刷新' : state === 1? '松開刷新' : '刷新中'}}</text>
  </view>
  <view style="transform: translateY({{translateHeight}}rpx)">
    <slot name="content"></slot>
  </view>
</view>

這個文件定義組件的模版，有一個滾動view包裹，綁定了touch事件，里面包含下拉刷新時的動畫，和一個slot，slot用于插入滾動列表的內(nèi)容
wxss:

.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150rpx;
  margin-bottom: -150rpx;
  background-color: #fff;
}
.loading {
  width: 30rpx;
  height: 30rpx;
  border:6rpx solid #333333;
  border-bottom: #cccccc 6rpx solid;
  border-radius: 50%;
  animation:load 1.1s infinite linear;
      
}
@keyframes load{ 
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.tip {
  margin-left: 10rpx;
  color: #666;
}

樣式文件這沒什么特別的
js:

let lastY = 0 // 上一次滾動的位置
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx轉(zhuǎn)化比例
Component({
  options: {
    multipleSlots: true
  },
  data: {
    scrollTop: 0,
    translateHeight: 0, // 平移距離
    state: -1
  },
  properties: {
    // 觸發(fā)下拉刷新的距離
    upperDistance: {
      type: Number,
      value: 150
    }
  },
  methods: {
    // 監(jiān)聽滾動，獲取scrollTop
    onPageScroll (e) {
      this.data.scrollTop = e.scrollTop
    },
    touchStart (e) {
      lastY = e.touches[0].clientY
    },
    touchMove (e) {
      let clientY = e.touches[0].clientY
      let offset = clientY - lastY
      if (this.data.scrollTop > 0 || offset < 0) return
      this.data.translateHeight += offset
      this.data.state = 0
      lastY = e.touches[0].clientY
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.data.state = 1
      }
      this.setData({
        translateHeight: this.data.translateHeight,
        state: this.data.state
      })
    },
    touchEnd (e) {
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.setData({
          translateHeight: 150
        })
        this.triggerEvent('scrolltoupper')
        this.setData({
          state: 2
        })
      } else if (this.data.scrollTop <= 0) {
        this.stopRefresh()
      }
    },
    //  停止刷新
    stopRefresh () {
      this.setData({
        translateHeight: 0,
        state: -1
      }, () => {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
      })
    }
  }
})

這個下拉刷新組件最重要的是控制下拉刷新的時機(jī)，代碼體現(xiàn)就是定義了一個upperDistance，下拉刷新的距離來判斷是否執(zhí)行刷新。手指滑動時，獲取滑動距離，translateHeight累加用于展示，在touchEnd事件中判斷滑動距離是否達(dá)到設(shè)定值，達(dá)到設(shè)定值就發(fā)送scrolltoupper事件，在父組件中監(jiān)聽即可，否則停止刷新。

使用：

<header title="下拉刷新" background="#fff"></header>
<refresh-scroll id="refreshScroll" bindscrolltoupper="refresh">
  <view class="item" slot="content" wx:for="{{list}}">{{item}}</view>
</refresh-scroll>

Page({
  data: {
    list: []
  },
  onLoad: function () {
    this.refreshScroll = this.selectComponent('#refreshScroll')
    for (let i = 0; i < 10; i++) {
      this.data.list.push(i)
    }
    this.setData({
      list: this.data.list
    })
  },
  onPageScroll (e) {
    this.refreshScroll.onPageScroll(e)
  },
  onReachBottom () {
    wx.showLoading({
      title: 'onReachBottom'
    })
    setTimeout(() => {
      wx.hideLoading()
    }, 1000)
  },
  refresh: function (e) {
    setTimeout(() => {
      this.refreshScroll.stopRefresh()
    }, 1000)
  }
})

在使用時關(guān)鍵是要將頁面中onPageScroll中獲取的值傳遞下去，然后bindscrolltoupper監(jiān)聽scrolltoupper事件，執(zhí)行刷新操作然后再調(diào)用stopRefresh停止刷新，下來看真機(jī)上的測試效果：

iOS:

Android:

在真機(jī)測試時，表現(xiàn)都還不錯，當(dāng)然了，這只是自定義下拉刷新的一個簡單組件例子，如果需要用于到實(shí)際項(xiàng)目，可能還需要自己去完善，畢竟不同的人應(yīng)用的場景不同，這里只是給出了一個思路而已

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“小程序怎么實(shí)現(xiàn)下拉刷新”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站名稱：小程序怎么實(shí)現(xiàn)下拉刷新
文章源于：http://jinyejixie.com/article34/gpeepe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站設(shè)計、小程序開發(fā)、全網(wǎng)營銷推廣、動態(tài)網(wǎng)站、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)