HTML页面
<!-- 点击回到顶部 -->
<image src='/pages/img/a.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
css页面
.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
right: 30rpx;
border-radius: 50%;
}
js页面
// 获取滚动条当前位置
onPageScroll: function (e) {
//console.log(e)
if (e.scrollTop > 1500) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到顶部
goTop: function (e) { // 一键回到顶部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
},
下拉触底刷新
在js中我们要先定义一个空的数组进行查出下一页数据的追加,然后定义出当前默认页数page这两个参数
js代码
data:{
//定义每页显示条数和偏移量以及一个可以进行追加的空数组
data:[],
page:1,
limit:5,
count:''
},
页面第一次请求的数据
onLoad: function (options) {
var _thih=this;
wx.request({
url: 'http://day531.week2.com/liebiao',
data:{
page:_thih.data.page,
limit:_thih.data.limit
},
success:function(res){
//console.log(res.data.data.data)
var add = res.data.data.data;
var count = res.data.data.total;
//console.log(count)
_thih.setData({
data:add,
count:count
});
}
})
},
下拉触底加载下一页
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let _thih=this;
//获取总条数和当前页数以及onload第一次加载赋过值的数组data
var count = _thih.data.count;
var page = _thih.data.page+=1;
//console.log(page)
var limit = _thih.data.limit;
var data = _thih.data.data;
//让总条数/每页显示条数然后向上取整从而得出总页数【得出总页数】Math.ceil:向上取整
let zpage = Math.ceil(count / (limit-1))
//console.log(zpage)
if(zpage == page){
wx.showToast({
title: '我也是有底线的',
})
return false;
}
wx.request({
url: 'http://day531.week2.com/liebiao',
data:{
page:_thih.data.page,
limit:_thih.data.limit
},
success:function(res){
//console.log(res.data.data.data)
var add = res.data.data.data;
for(let i in add){
data.push(add[i])
}
_thih.setData({
data:data,
});
}
})
},
HTML页面正常循环展示
<!-- 列表 -->
<view>
<block wx:for="{{data}}" wx:key="key">
<view class="body">
<view class="viedo">
<video
id="myVideo"
src="{{item.video}}"
binderror="videoErrorCallback"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
show-center-play-btn='{{false}}'
show-play-btn="{{true}}"
controls
picture-in-picture-mode="{{['push', 'pop']}}"
bindenterpictureinpicture='bindVideoEnterPictureInPicture'
bindleavepictureinpicture='bindVideoLeavePictureInPicture'
custom-cache="{{false}}"
></video>
</view>
<view class="title">{{item.title}}</view>
</view>
</block>
</view>
后台请求方式
//详情
public function read(Request $request)
{
//小程序下拉刷新,接收每页显示条数和偏移量
$page=$request->input('page');
$limit=$request->input('limit');
//将获取到的数据存入缓存,先查询缓存,如果有的话就直接从缓存中获取数据,减少数据库压力
// if (Cache::has('id')){
// $data=Cache::get('id');
// }else{
//$data=Read::with('courseRead')->where('t_id',$id)->get();
$data=Read::paginate($limit,'*','page',$page);
// Cache::set('id',$data);
// }
$count=Read::count();
foreach ($data as &$v){
$v['image']="http://day528.exam9.com/".$v['image'];
}
return ['code'=>200,'data'=>$data,'count'=>$count,'msg'=>'查询成功'];
}