小程序 下拉刷新 上拉加载

• 2019 年 10 月 5 日
• 筆記

微信小程序

下拉刷新 上拉加载，简单方便，易于上手。 1.首先上list.wxml代码

<!--pages/list/list.wxml-->  <view class="list-container">    <view class="header">      </view>    <view class="doc-item"  wx:for="{{dataSource}}" wx:for-item="item" wx:key="{{item.id}}"  bindtap='bindViewTap' data-url="{{item.url}}" data-name="{{item.name}}">      <text >{{item.title}}</text>      <view class='item-info'>        <text>{{item.author}}</text>        <text style='float: right'>{{item.time}}</text>      </view>    </view>    <view class="footer" wx:if="{{!hasMoreData}}">      没有更多了    </view>    <view class="footer" wx:if="{{hasMoreData}}">      加载中...    </view>  </view>

2.再上js代码

// pages/list/list.js    Page({      /**     * 页面的初始数据     */    data: {      id: "",      dataSource: [],      hasMoreData: true,      pageIndex: 1,      pageSize: 15,      isLoading: false    },      /**     * 生命周期函数--监听页面加载     */    onLoad: function (options) {      this.setData({        id: options.id//从url上获取id      })      wx.setNavigationBarTitle({title: options.nav})      this.getList(1)    },    getList: function(index){      wx.request({        url: 'your server url',        data: {          method: 'your method',          pageSize: this.data.pageSize,          pageIndex: index,        },        header: {          'content-type': 'application/json' // 默认值        },        success: (res) => {          if(this.data.pageIndex == 1){            wx.stopPullDownRefresh({              complete: this.updateDom(res)            })          }else{            this.updateDom(res)          }          }      })    },    updateDom: function(res){      this.setData({ dataSource: this.data.dataSource.concat(res.data.Data.List), isLoading: false })      if (this.data.pageSize > res.data.Data.Length) {        this.setData({ hasMoreData: false })      }    },      /**     * 生命周期函数--监听页面初次渲染完成     */    onReady: function () {      },      /**     * 生命周期函数--监听页面显示     */    onShow: function () {      },      /**     * 生命周期函数--监听页面隐藏     */    onHide: function () {      },      /**     * 生命周期函数--监听页面卸载     */    onUnload: function () {      },      /**     * 页面相关事件处理函数--监听用户下拉动作     */    onPullDownRefresh: function () {      if(!this.data.isLoading){        this.setData({ hasMoreData: true, pageIndex: 1, dataSource: [], isLoading: true})        this.getList(1)      }      },    //事件处理函数    bindViewTap: function (e) {      //To do somethiing    },    /**     * 页面上拉触底事件的处理函数     */    onReachBottom: function () {      if(this.data.hasMoreData && !this.data.isLoading){        this.setData({ pageIndex: this.data.pageIndex + 1, isLoading: true})        this.getList(this.data.pageIndex)      }      },      /**     * 用户点击右上角分享     */    onShareAppMessage: function () {        }  })

3.简单的list.wxss

/* pages/list/list.wxss */  page{    background-color: #E6E6E6;  }  .header{    text-align: center;    font-size: 14px;    color: #aaa;  }  .footer{    text-align: center;    padding-top: 36rpx;    padding-bottom: 48rpx;    font-size: 14px;    color: #aaa;  }  .doc-item{    padding: 24rpx 36rpx;    margin: 12rpx 0;    display: flex;    background: white;    flex-direction: column;    border-bottom: 1px solid #e3e3e3;  }  .item-info{    padding-top: 24rpx;    font-size: 14px;    color: #aaa;  }

4.list.json配置文件

{    "enablePullDownRefresh": true,    "backgroundTextStyle": "dark"  }

至此，一个简单的下拉刷新上拉加载基本搞定了。巧用微信的各种Api，就很舒服。 继续扩展的话： 1.updateDom那里下拉刷新是简单的清空重新加载，其实可以进行数组比较插入最新记录； 2.出错提示没加； 3.可以使用腾讯开源框架Wepy这种现代化的类Vue框架进行组件化开发。