今天给大家介绍一下列表的下拉刷新和下拉加载,对于一个很长的列表,有的时候可能跳转过页面但是还没有加载完内容,这时候下拉一下刷新页面就可以了,在很多网页我们应该都见过吧,我们最常用的qq微信都有。我们要做的一款小程序就有列表,所以在这里跟大家分享一下。
首先要新建一个list文件
在list.wxml代码
<!--index.wxml--> <view class="weui-cells weui-cells_after-title"> <view class="page__bd"> <view class="weui-panel weui-panel_access"> <view class="weui-panel__hd"> 学生列表 <button class="weui-btn mini-btn" type="default" size="mini" bindtap='add'>添加</button> </view> <view class="weui-panel__bd" wx:for="{{list}}"> <!-- <block wx:for="{{list}}"> --> <navigator url="../headimg/headimg?id={{item.id}}&no={{item.no}}&name={{item.name}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> <view class="weui-media-box__hd weui-media-box__hd_in-appmsg"> <image class="weui-media-box__thumb" src="{{item.path}}" /> </view> <view class="weui-media-box__bd weui-media-box__bd_in-appmsg"> <view class="weui-media-box__title">{{item.no}}</view> <view class="weui-media-box__desc">{{item.name}} {{item.sex}} {{item.age}}</view> </view> </navigator> <!-- </block> --> </view> </view> </view> </view>
list.js
//index.js //获取应用实例 const app = getApp() var page = 1; var isfinish = false;//加载完毕 function loadmore(that) { if (isfinish) return; wx.showLoading({ title: '正在加载中', }) wx.request({ url: "http://xxx/server/index.php/home/index/select", data: { page: page, }, success: (res) => { // wx.hideLoading(); // that.setData({list:res.data.data}); // page++; console.log(res.data.data); var data = res.data.data; wx.hideLoading(); if (data.length > 0) { var list = that.data.list; for (var i = 0; i < data.length; i++) { list.push(data[i]); } that.setData({ list: list }); page++; } else { isfinish = true; } wx.stopPullDownRefresh() } }) } Page({ data: { list: [], }, add: function (e) { wx.navigateTo({ url: '../add/add', }) }, onPullDownRefresh: function () { page = 1; isfinish = false; this.setData({ list: [] }); loadmore(this); }, onReachBottom: function () { var that = this; loadmore(that); }, onPageScroll: function () { // Do something when page scroll }, onLoad: function () { page = 1; wx.request({ url: 'http://xxx/server/index.php/home/index/select', data: { }, header: { 'content-type': 'application/json' // 默认值 }, success: (res) => { // var student = res.data.student; // console.log(res.data); this.setData({ list: res.data.data }); wx.setStorageSync('list', res.data.data) } }) }, onshow: function () { loadmore(this) } })
php后台代码
// 显示全部学生信息 public function select(){ $pagesize=10; $where = array(); if(!empty($condition)){ $where['a.no|a.name'] = $condition; } $data = M('student') ->alias('a') ->join('__IMAGE__ b ON a.no=b.no','LEFT') ->field('a.id,a.name,a.no,a.sex,a.age,a.path,b.base64') ->where($where) ->page($_GET['page'],$pagesize) ->select(); foreach ($data as &$row) { $path = $row['path']; if(!empty($path)){ if(!file_exists($path)){ $dir = dirname($path); mkdir($dir,0777,true); file_put_contents($path, base64_decode($row['base64'])); } $row['path'] = self::HOST . ltrim($path,'.'); } unset($row['base64']); } $this->ajaxReturn(array('data'=>$data)); }这样列表的上拉加载,下拉刷新就完成了,大家如果有这方面的学习,不妨参考下,大家也可以向我提问,我们互相学习。