1. 程式人生 > >微信小程序下拉刷新和上拉加載的實現

微信小程序下拉刷新和上拉加載的實現

keyword this navig comm com DC 程序 小程序 ati

一: 下拉刷新

下拉刷新兩個步驟就能實現。

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. },

微信小程序下拉刷新和上拉加載的實現