微信小程序下拉刷新和上拉加载的实现
Posted hzp-tt
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序下拉刷新和上拉加载的实现相关的知识,希望对你有一定的参考价值。
一: 下拉刷新
下拉刷新两个步骤就能实现。
1.在要实现下拉刷新的页面的json配置文件里面加上
"enablePullDownRefresh": true, //开启下拉刷新
"backgroundColor": "#f0145a" //设置背景颜色,如果不设置背景颜色,就看不见下拉刷新的加载动画了,因为加载动画和背景色颜色一样
2.在要实现下拉刷新的页面下拉刷新的函数
onPullDownRefresh() {
wx.showNavigationBarLoading() //在标题栏中显示加载
},
二. 上拉加载更多
- // 帖子滚动到底部的加载事件
- lower:function(e){
- console.log(e)
- var that = this
- var url = util.apiUrl + ‘FWinfo/tiezi_list‘
- util.request(url, ‘get‘, { ‘program_id‘: app.program_id, ‘id‘: that.data.msg_id }, ‘正在加载数据‘, function (res) {
- for (var i = 0; i < res.data.length; i++) {
- res.data[i].image = res.data[i].image.split(",")
- }
- var msg = that.data.msg.concat(res.data)
- that.setData({
- msg: msg,
- msg_id: res.data[res.data.length - 1].id
- })
- })
- },
以上是关于微信小程序下拉刷新和上拉加载的实现的主要内容,如果未能解决你的问题,请参考以下文章