为了样式好看引入了lin-ui样式
书写wxml前段页面
<scroll-view class="scroll" bindscrolltolower="bottom" scroll-y="{{true}}" bindscrolltoupper="top">
<block wx:for="{{list}}">
<l-card type="primary" l-img-class="right-card" position="right" image="{{item.pic}}" title="{{item.title}}" bindtap="listInfo" data-id="{{item.id}}">
<view class="content">
{{item.desn}}
</view>
</l-card>
</block>
</scroll-view>
首先在onload中加载出第一页数据
/**
* 页面的初始数据
*/
data: {
page:1,
list:[]
},
/**
* 生命周期函数--监听页面加载
* 加载出第一页数据
*/
onLoad: function (options) {
wx.request({
url: 'http://www.exercise.com/word.php/index',
success:(e)=>{
let list=e.data.data
this.setData({list:list})
}
})
},
js中上拉加载事件
bottom(e){
let that=this
let page = this.data.page
page++
this.setData({page:page})
wx.request({
url: 'http://www.exercise.com/word.php/index',
data:{
page:page
},
success:(res)=>{
// let list= e.data.data
// this.setData({list:list})
console.log(res);
console.log(that.data.list);
let list = res.data.data;
if(list.length > 0){
wx.showToast({
title: '加载中....',
icon:"loading",
duration:99999
});
that.setData({
list:[...that.data.list,...list]
});
wx.showToast({
icon:"none",
duration:100
})
}else{
wx.showToast({
title: '没有更多啦!',
icon:"none",
duration:2000
})
}
}
})
},
下拉刷新
/**
* 滑轮触碰顶部事件
*/
top(e){
wx.request({
url: 'http://www.exercise.com/word.php/index',
data:{
page:1
},
success:(res)=>{
let list = res.data.data;
this.setData({list:list})
wx.showToast({
title: '刷新成功',
icon: 'success',
duration: 1000
})
}
})
},