1. <dd id="erndk"></dd>
                1. 小程序頁面的上拉加載和下拉加載

                  互聯網 2022/4/27 9:13:57

                  1、需求:小程序的首頁需要添加上拉加載和下拉加載的功能,之前做上拉加載和下拉加載是用的是scroll-view組件,但是感覺首頁用scroll-view不是最佳選擇,page自帶的上拉加載和下拉加載更好用一點,就記錄一下 2、解決: 上拉加載: 思路:上拉加載的原理是小程序在頁面頂…

                  1、需求:小程序的首頁需要添加上拉加載和下拉加載的功能,之前做上拉加載和下拉加載是用的是scroll-view組件,但是感覺首頁用scroll-view不是最佳選擇,page自帶的上拉加載和下拉加載更好用一點,就記錄一下

                  2、解決:

                  上拉加載:

                  思路:上拉加載的原理是小程序在頁面頂部撐出一塊50px的空間,在一定時間后消失,所以在頂部的空間加上樣式配置監聽方法就好了

                  首先在首頁json里面設置enablePullDownRefresh(還有個onReachBottomDistance屬性可以設置拖動時加載區域的高度,默認50)

                  {
                  ...
                    "enablePullDownRefresh": true,
                  ...
                  }

                  在js里面配置onPullDownRefresh方法監聽用戶下拉動作

                  // pages/home/home.ts
                  export { }
                  const app = getApp<IAppOption>()
                  Page({
                    /**
                     * 頁面的初始數據
                     */
                    data: {
                      hotGoodsForm: {
                        pageNum: 1,
                        pageSize: 10
                      },
                      hotGoodsList: [] as any,
                      homeLoadStatus: 0
                    },
                    getHotGoodsInit(): void {
                      this.data.hotGoodsForm.pageNum = 1
                      this.data.hotGoodsForm.pageSize = 10
                      app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => {
                      //加載完成停止當前頁面下拉刷新
                        wx.stopPullDownRefresh()
                        this.setData({
                          hotGoodsList: res.list,
                          homeLoadStatus: 0
                        })
                      })
                    },
                    /**
                     * 頁面相關事件處理函數--監聽用戶下拉動作
                     */
                    onPullDownRefresh() {
                      this.getHotGoodsInit()
                    },
                  })

                  至于wxml的話,我是直接弄一個loading樣式,定位在頁面之前,這樣下拉的時候直接顯示加載中

                  <view class="home_swiper_loading">
                    <t-loading theme="spinner" size="40rpx" loading text="加載中..."></t-loading>
                  </view>
                    .home_swiper_loading {
                      width: 100%;
                      height: 100rpx;
                      position: absolute;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      top: -100rpx;
                      background-color: #f5f5f5;
                    }

                  下拉加載:

                  思路:下拉加載是滾動到頁面底部會觸發監聽事件,所以讓list把page撐開,配置加載樣式組件展示狀態配置方法就ok了

                  下拉加載第一步就是要滾動到底部,如果你用的是自定義tabber,可以設置page屬性來展示完全頁面

                  page{
                    height: auto;
                    padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
                  }

                  然后在最底部加一個展示狀態的組件,用于展示加載中,沒有更多數據和加載失敗這些狀態

                  <load-more list-is-empty="{{!hotGoodsList.length}}" status="{{homeLoadStatus}}" bind:retry="getHotGoodsInit" />

                  在js里面配置onReachBottom監聽頁面上拉觸底事件,監聽到事件后,處理新的數據

                  // pages/home/home.ts
                  export { }
                  const app = getApp<IAppOption>()
                  Page({
                    /**
                     * 頁面的初始數據
                     */
                    data: {
                      hotGoodsForm: {
                        pageNum: 1,
                        pageSize: 10
                      },
                      hotGoodsList: [] as any,
                      homeLoadStatus: 0
                    },
                    getHotGoodsInit(): void {
                      this.data.hotGoodsForm.pageNum = 1
                      this.data.hotGoodsForm.pageSize = 10
                      app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => {
                        wx.stopPullDownRefresh()
                        this.setData({
                          hotGoodsList: res.list,
                          homeLoadStatus: 0
                        })
                      })
                    },
                    getHotGoodsDowm(): void {
                      this.setData({
                        "hotGoodsForm.pageNum": this.data.hotGoodsForm.pageNum + 1,
                        homeLoadStatus: 1
                      })
                      app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => {
                        if (res.list.length != 0) {
                          this.setData({
                            hotGoodsList: [...this.data.hotGoodsList, ...res.list],
                            homeLoadStatus: 0
                          })
                        } else {
                          this.setData({
                            homeLoadStatus: 2
                          })
                        }
                      }).catch(() => {
                        this.setData({
                          homeLoadStatus: 3
                        })
                      })
                    },/**
                     * 生命周期函數--監聽頁面加載
                     */
                    onl oad() {
                      this.getBannerList()
                      this.getHotGoodsInit()
                    },
                  
                    /**
                     * 生命周期函數--監聽頁面初次渲染完成
                     */
                    onReady() {
                  
                    },
                  
                    /**
                     * 生命周期函數--監聽頁面顯示
                     */
                    onShow() {
                  
                    },
                  
                    /**
                     * 生命周期函數--監聽頁面隱藏
                     */
                    onHide() {
                  
                    },
                  
                    /**
                     * 生命周期函數--監聽頁面卸載
                     */
                    onUnload() {
                  
                    },
                  
                    /**
                     * 頁面相關事件處理函數--監聽用戶下拉動作
                     */
                    onPullDownRefresh() {
                      this.getHotGoodsInit()
                    },
                  
                    /**
                     * 頁面上拉觸底事件的處理函數
                     */
                    onReachBottom() {
                      this.getHotGoodsDowm()
                    },
                  
                    /**
                     * 用戶點擊右上角分享
                     */
                    onShareAppMessage() {
                  
                    }
                  })

                  3、效果:

                   

                  隨時隨地學軟件編程-關注百度小程序和微信小程序
                  關于找一找教程網

                  本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
                  本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章,希望廣大程序員努力學習,讓我們用科技改變世界。
                  [小程序頁面的上拉加載和下拉加載]http://www.yachtsalesaustralia.com/tech/detail-317482.html

                  贊(0)
                  關注微信小程序
                  程序員編程王-隨時隨地學編程

                  掃描二維碼或查找【程序員編程王】

                  可以隨時隨地學編程啦!

                  技術文章導航 更多>
                  国产在线拍揄自揄视频菠萝

                        1. <dd id="erndk"></dd>