原创微信小程序实现上拉加载数据、下拉刷新、分页功能

开发技术 1347 0 2023-04-13

微信小程序实现上拉加载数据、下拉刷新、分页功能

这节主要是实例讲解,怎样实现上拉加载数据、下拉刷新、分页等功能,首先编写样式,代码如下:

<view class="shop-list" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.img}}" />
  </view>
  <view class="info">
    <text class="title">{{item.id}}. {{item.name}}</text>
    <text>电话:{{item.phone}}</text>
    <text>地址:{{item.address}}</text>
    <text>营业时间:{{item.hours}}</text>
  </view>
</view>

<view class="hlb" hidden="{{bottomMsg}}">
  我是有底线的哦 ^_^
</view>

.shop-list{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  border-radius: 10rpx;
  box-shadow: 1rpx 1rpx 15rpx #dddddd;
}
.thumb image{
  width: 210rpx;
  height: 210rpx;
  display: block;
  margin-right: 15rpx;
  border-radius: 8rpx;
  border: 1rpx solid #fafafa;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.info .title{
  font-weight: bold;
}

.hlb{text-align: center; padding: 10rpx 0; font-size: 24rpx; color: #999999;}


其次在页面配置文件.json中配置下拉刷新,代码如下:

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F89600",
  "navigationBarTextStyle": "white",
  "onReachBottomDistance": 20,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}


最后我们实现功能,代码如下:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    query:{},
    shopList:[],
    total:0,
    page:1,
    pageSize:8,
    isLoading:false,
    bottomMsg:true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({ query: options })
    this.getShopList()
  },

  getShopList(cb){
    this.setData({ isLoading: true })
    wx.showLoading({ title: '数据加载中...' })
    wx.request({
      url: 'https://www.hilo8.com/life',
      method:'GET',
      data:{
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success:(res)=>{
        //console.log(res);
        this.setData({
          shopList: [...this.data.shopList, ...res.data.data],
          total: res.data.total
        })
      },
      complete:()=>{
        wx.hideLoading()
        this.setData({ isLoading:false })
        cb && cb()
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({ title: this.data.query.title })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      shopList:[],
      page:1,
      isLoading:false,
      bottomMsg:true
    })
    this.getShopList(()=>{
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      this.setData({ bottomMsg: false })
      return;
    }
    if(this.data.isLoading) return;
    this.setData({
      page: this.data.page + 1
    })
    this.getShopList()
  }
})


参数说明:

query: 接收上个页面传过来的参数

shopList: 数据列表

total: 总数据

page: 当前页数

pageSize: 每页显示数量

isLoading: 截流操作,如在加载数据时不能再发请求加载下一页数据

bottomMsg: 显示已无数据状态,即没有下一页数据了


完成后效果图如下:

上一篇:微信小程序开发学习笔记四:window窗口和tabBar导航的配置

下一篇:微信小程序自定义组件及数据监听器、生命周期、插槽、通信、Behaviors

讨论数量:0

请先登录再发表讨论。 2024-05-21

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链