微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)

效果体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

DEMO下载

效果图

下拉刷新上拉加载效果图

原理

利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改!

页面配置JSON

  1. enablePullDownRefresh:开启下拉刷新;
  2. onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px。
{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}

WXML

<view class="tui-content">
  <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>

JS

  1. 此处用setTimeout模拟请求数据;
  2. 加载数据限制三次,调用wx.showToast显示没有更多数据。
Page({
  data: {
    dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
    count : 0
  },
  onPullDownRefresh(){
    var self = this;
    setTimeout(() => {
      // 模拟请求数据,并渲染
      var arr = self.data.dataList, max = Math.max(...arr);
      for (var i = max + 1; i <= max + 3; ++i) {
        arr.unshift(i);
      }
      self.setData({ dataList: arr });
      // 数据成功后,停止下拉刷新
      wx.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom(){
    var arr = this.data.dataList, max = Math.max(...arr);
    if (this.data.count < 3) {
      for (var i = max + 1; i <= max + 5; ++i) {
        arr.push(i);
      }
      this.setData({
        dataList: arr,
        count: ++this.data.count
      });
    } else {
      wx.showToast({
        title: '没有更多数据了!',
        image: '../../src/images/noData.png',
      })
    }
  }
})

总结

必须在每次数据请求完成后,使用wx.stopPullDownRefresh()停止下拉刷新。

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

其他

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

  • 4
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现一个移动端的table表格,并且有上,下刷新的功能,你可以使用一些开源的UI框架或者组件库,例如MUI、Vant、Ant Design Mobile等。 以下是一个使用MUI框架实现的示例代码: HTML: ```html <!-- table表格容器 --> <div id="table-container"> <!-- table表格 --> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <<li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> <!-- 省略多的表格行 --> </ul> <!-- 上提示 --> <div class="mui-pull-bottom-tips"> <div class="mui-loading"> 中... </div> </div> </div> ``` CSS: ```css /* table表格容器样式 */ #table-container { height: 100%; } /* 上提示样式 */ .mui-pull-bottom-tips { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #888; } .mui-pull-bottom-tips .mui-loading { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #07c160; animation: mui-rotate 0.6s linear infinite; } @keyframes mui-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } ``` JavaScript: ```javascript // 初始化上 mui.init({ pullRefresh: { container: '#table-container', up: { contentrefresh: '正在...', callback: function() { // 模拟数据 setTimeout(function() { // 插入新的表格行 var table = document.querySelector('.mui-table-view'); var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">New Item</a>'; table.appendChild(li); // 结束上 mui('#table-container').pullRefresh().endPullupToRefresh(false); }, 1000); } } } }); ``` 注意:这只是一个简单的示例代码,实际情况可能需要复杂的代码来满足需求。另外,上和下刷新功能需要与后端API接口配合使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值