今天给大家介绍一下列表的下拉刷新和下拉加载,对于一个很长的列表,有的时候可能跳转过页面但是还没有加载完内容,这时候下拉一下刷新页面就可以了,在很多网页我们应该都见过吧,我们最常用的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));
}
这样列表的上拉加载,下拉刷新就完成了,大家如果有这方面的学习,不妨参考下,大家也可以向我提问,我们互相学习。