码迷,mamicode.com
首页 > 微信 > 详细

微信小程序下拉刷新和上拉加载的实现

时间:2018-05-03 23:31:28      阅读:412      评论:0      收藏:0      [点我收藏+]

标签:看不见   color   滚动   image   navig   hat   var   pull   _id   

一: 下拉刷新

下拉刷新两个步骤就能实现。

1.在要实现下拉刷新的页面的json配置文件里面加上

"enablePullDownRefresh": true, //开启下拉刷新
"backgroundColor": "#f0145a" //设置背景颜色,如果不设置背景颜色,就看不见下拉刷新的加载动画了,因为加载动画和背景色颜色一样

2.在要实现下拉刷新的页面下拉刷新的函数

onPullDownRefresh() {
wx.showNavigationBarLoading() //在标题栏中显示加载
},

二. 上拉加载更多

    1. // 帖子滚动到底部的加载事件  
    2. lower:function(e){  
    3.   console.log(e)  
    4.   var that = this  
    5.   var url = util.apiUrl + ‘FWinfo/tiezi_list‘  
    6.   util.request(url, ‘get‘, { ‘program_id‘: app.program_id, ‘id‘: that.data.msg_id }, ‘正在加载数据‘, function (res) {  
    7.     for (var i = 0; i < res.data.length; i++) {  
    8.       res.data[i].image = res.data[i].image.split(",")  
    9.     }  
    10.     var msg = that.data.msg.concat(res.data)  
    11.     that.setData({  
    12.       msg: msg,  
    13.       msg_id: res.data[res.data.length - 1].id  
    14.     })  
    15.   })  
    16. },  

微信小程序下拉刷新和上拉加载的实现

标签:看不见   color   滚动   image   navig   hat   var   pull   _id   

原文地址:https://www.cnblogs.com/hzp-tt/p/8987953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!