微信小程序(2)--下拉刷新和上拉加载更多

下拉刷新

1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新。)

具体页面的.json文件:

{
"enablePullDownRefresh":true
}

app.json文件:

  "window":{
"enablePullDownRefresh": true

2.js文件中添加回调函数

 /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { },

上拉加载更多(不需要配置)

  /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { },

1.publish.wxml文件

<block wx:for="{{publishs}}" wx:key="publishs">
<view class="publish">
<text>{{item.songname}}</text>
</view>
</block>
<view class="weui-loadmore" hidden="{{!isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="Completesollow" hidden="{{!searchLoadingComplete}}">没有更多了...</view>

2.publish.js文件

/**
* 页面的初始数据
*/
data: {
publishs:[],
isHideLoadMore:false, //"上拉加载"的变量,默认false,隐藏  
searchLoadingComplete:false, //“没有数据”的变量,默认false,隐藏 
page:, //第一页
isFromSearch:true
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.dataget()
},
dataget:function(){
var that = this
wx.request({
url: 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&w=%E9%9F%B3%E4%B9%90&zhidaqu=1&catZhida=1&t=0&flag=1&ie=utf-8&sem=1&aggr=0&perpage=20&n=15&p='+this.data.page+'&remoteplace=txt.mqq.all&_=1501467319794', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.data)
//判断是否有数据,有则取数据
if (res.data.data.song.curnum!= ) {
let searchList = [];
//如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加 数据继续添加进数组 that.data.publishs.concat
that.data.isFromSearch ? searchList = res.data.data.song.list : searchList = that.data.publishs.concat(res.data.data.song.list)
that.setData({
publishs: searchList,
isHideLoadMore: true,
})
}else{
that.setData({
searchLoadingComplete: true, //显示
isHideLoadMore: false //把"上拉加载"的变量设为false,隐藏
});
}
}
})
},
//加载更多
onReachBottom: function () {
console.log('加载更多')
setTimeout(() => {
this.setData({
// isHideLoadMore: true,
// searchLoadingComplete: false,
page:this.data.page+,
isFromSearch: false
})
this.dataget();
}, )
},
上一篇:理解PagerAdapter的instantiateItem()方法


下一篇:微信小程序scroll-view不能实现下拉刷新