方案一:使用TP5limit进行偏移实现
微信小程序
wxml
//scroll-y 设置这个是让他纵向
//bindscrolltolower事件是监听
<scroll-view scroll-y="{{ true }}" style="height:{{ height }}px" bindscrolltolower="getMore">
<view class="courseItem" wx:for="{{ courseList }}" wx:key="*this" bindtap='clickKecheng' id="{{ index }}" data-column="{{ item.cate_id }}">
<view class="courseImg">
<image mode='widthFix' src="{{ item.c_pic }}" />
</view>
<view class="courseInfo">
<view class="title">{{ item.c_title) }}</view>
<view class="desc">{{ item.c_desc) }}</view>
<view class="author">讲师:{{ item.c_teacher }}</view>
</view>
</view>
</scroll-view>
js
//初始data数据
data: {
height:0,
courseList : [],
//偏移量
offset : 0,
//显示条数
limit : 5
},
//执行scroll-view的监听事件 流加载
getMore(){
//这块是我自己封装的一个请求 想了解的可以看看es6 ^_^
studyModel.getCourse({
//参数
offset:this.data.offset,
limit:this.data.limit
}).then(res=>{
// 数据加载出来后关闭loading
wx.hideLoading();
var len = res.data.data.length;
if(len <= 0){
wx.showToast({
title: '没有更多数据了',
mask:false,
icon:'none'
})
}
this.setData({
//concat是重点
courseList: this.data.courseList.concat(res.data.data),
offset: this.data.offset + res.data.data.length
})
})
},
// 计算可用面积高度
height_study: function () {
var that = this;
wx.getSystemInfo({
success(res) {
console.log(res.windowHeight);
that.setData({
height: res.windowHeight
})
}
})
},
//监听页面加载
onLoad: function (options) {
this.getMore();
this.height_study();
},
tp5控制器
//接收来自小程序的请求参数
$offset = input('offset',0,'intval');
$limit = input('limit',10,'intval');
$courseRes = model('course')->limit($offset,$limit)->where('c_pic','neq','')->select();
$data = ['data'=>$courseRes,'status'=>0];
return json($data);
方案二:使用TP5page根据第几页显示多少条来展示(来源于一个好哥们的指导)
tp5控制器
public function get_course(){
//当前页
$current = input('current');
//显示多少条
$limit = input('limit');
$courseRes = model('course')page($current,$limit)->select();
return json(['code'=>200,'courseRes'=>$courseRes]);
}
微信小程序js
getCourseMore(){
var _this = this;
// 获取下一页页码
var nextpage = _this.data.nextpage;
// 获取当前页页码
var current = _this.data.current;
//获取数据
var courseList = _this.data.courseList;
nextpage += _this.data.current;
_this.setData({ nextpage: nextpage})
wx.request({
url:'http://edu.com/Api/v1/get_course',
data:{
current:nextpage,
limit:5
},
header:{'content-type':'application/json'},
success:function(res){
if(res.data.code == 200){
//声明空数组,用来接收加载的新数据
var arr = _this.data.courseList;
arr = arr.concat(res.data.courseRes);
if (res.data.courseRes.length <= 0){
wx.showToast({
title: '没有更多了',
icon:'none',
duration:2000
})
}else{
_this.setData({
courseList:arr,
page:Number(_this.data.page) + Number(1),
})
}
}else{alert.showError('请求出错');}
},
fail:function(res){
alert.showError('网络连接失败');
},
complete:function(){}
})
},
各位如果有更好的方法欢迎在下面进行评论哦,互相交流学习!