下拉刷新和上拉加载更多
效果图:
代码
js
const app = getApp()
Page({
data: {
nomoreVisible:false,//没有更多了 是否显示
arr1: [{
"id": "1"
},
{
"id": "2"
},
{
"id": "3"
},
{
"id": "4"
},
{
"id": "5"
},
{
"id": "6"
},
{
"id": "7"
},
{
"id": "8"
},
{
"id": "9"
},
{
"id": "10"
},
],
//要增加的数组
arr2: [{
"id": "11"
},
{
"id": "12"
},
{
"id": "13"
},
{
"id": "14"
},
{
"id": "15"
},
{
"id": "16"
},
{
"id": "17"
},
{
"id": "18"
},
{
"id": "19"
},
{
"id": "20"
},
]
},
onLoad: function () {
},
onPullDownRefresh() {
console.log('--------下拉刷新-------')
// wx.showNavigationBarLoading() //在标题栏中显示加载
// wx.startPullDownRefresh()
// 两秒后隐藏
//wx.hideNavigationBarLoading()
// 加载数据完成后
wx.stopPullDownRefresh()
},
/*上拉触底时触发*/
onReachBottom: function () {
var that = this
console.log('--------上拉加载更多-------')
if(that.data.arr1.length<20){
that.data.arr1 = that.data.arr1.concat(that.data.arr2);
that.setData({
'arr1': that.data.arr1
})
}else{//没有更多了
that.data.nomoreVisible=true
}
}
})
.json
{
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"onReachBottomDistance":50
}
.wxml
<view class="intro">
<view wx:for="{{arr1}}" class="view_item">
<text>{{item.id}}</text>
</view>
<text style="color:red" visible="{{nomoreVisible}}">--没有更多了--</text>
</view>
.wxss
page{
width: 100%;
height: 100%;
}
.intro {
margin: 30px;
text-align: center;
}
.view_item {
height: 180rpx;
display: flex;
flex-direction: column;
/* align-items: center; */
/* 圆角 */
border-radius: 20rpx;
/* 边 */
border: 3rpx solid #E0E3DA;
box-shadow: 2rpx 2rpx 2rpx 2rpx #E0E3DA;
background-color: #ffffff;
margin: 10rpx;
/* padding使得文字和图片不至于贴着边框 */
padding: 15rpx;
position: relative;
}