微信小程序实现上拉加载下拉刷新（即粘即用）

前言

去年有出过一篇关于 vue 实现上拉加载下拉刷新的功能，最近微信小程序中也用到了这个功能，下面一起来看看微信小程序中是怎么实现这个小功能的吧。

实现效果如下：

实现思路：

**1. 首先需要在使用到的

json

文件下配置

"enablePullDownRefresh": true

**

{"usingComponents":{},"enablePullDownRefresh":true,}

**2. 在

js

文件中加上触底函数跟上拉函数**

//触底函数onReachBottom(){
    console.log("上拉加载....");},//上拉函数onPullDownRefresh(){
    console.log("下拉刷新...");},

**3. 请求接口，将新请求的数据通过

cancat

方法合并到

list

数组中，然后更新数据**

注：

concat()

方法用于连接两个或多个数组

this.data.page++;
let list = that.data.list.concat(res.data.data.rows)
that.setData({
    list: list,
    loading:false,});

4. 对数据进行判断，如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样

if(res.data.data.rows.length <this.data.limit){
    that.setData({
        loading:false,
        loaded:true,});}

5. 上拉加载时，改变文字状态，然后调用接口

let that =this;if(!that.data.loading){
    that.setData({
        loading:true,
        loaded:false});}setTimeout(function(){
    that.licensePort();},500)

**6. 下拉刷新时，将页码重置为

1

然后再次调用接口即可，但是不要忘了刷新完成后要关闭刷新的操作：

wx.hideNavigationBarLoading()

和

wx.stopPullDownRefresh()

。**

this.data.list =[]
 wx.showNavigationBarLoading()this.setData({
     page:1});this.licensePort();setTimeout(function(){
     wx.showToast({
         title:'刷新成功',
         icon:'none',
         duration:1000})
     wx.hideNavigationBarLoading() 
     wx.stopPullDownRefresh()},1000)

其他你可能关注的配置：

json文件中：

1. backgroundTextStyle: light // 刷新时三个点的颜色，只能是

light

或者

dark

2. backgroundColor: #FC1944 // 刷新时背景的颜色

js文件中：

3.wx.showNavigationBarLoading() // 在标题栏中显示加载

各文件完整代码如下：

wxml文件

<!-- 内容 --><view class="navBox" wx:for="{{list}}" wx:key="index"><view><text class="lableBox">区县</text><text wx:if="{{item.dqbm == '610101'}}">市辖区</text><text wx:if="{{item.dqbm == '610102'}}">新城区</text></view><view><text class="lableBox">企业名称</text><text>{{item.qymc}}</text></view><view><text class="lableBox">道闸数量</text><text>{{item.dzs}}</text></view><view><text class="lableBox">行业类型</text><text wx:if="{{item.hylb == '01'}}">长流程联合钢铁</text><text wx:if="{{item.hylb == '02'}}">短流程钢铁</text><text wx:if="{{item.hylb == '03'}}">铁合金</text><text wx:if="{{item.hylb == '04'}}">焦化</text></view><view><text class="lableBox">联系人</text><text>{{item.lxr}}</text></view><view><text class="lableBox">电话</text><text>{{item.lxdh}}</text></view><view><text class="lableBox">地址</text><text>{{item.qydz}}</text></view></view><!-- 加载时文字 --><view class="bomTxt"><view hidden="{{!loading}}">正在加载...</view><view hidden="{{!loaded}}">已加载全部</view></view>

js文件

//获取应用实例
var app =getApp();Page({
    data:{
        page:1,//当前第几页
        limit:3,//一页展示几条
        list:[],//所有数据
        loading:false,//是否展示 “正在加载” 字样
        loaded:false//是否展示 “已加载全部” 字样},//生命周期函数--监听页面加载
    onLoad:function(options){this.informPort();//调用接口方法},// 企业信息接口informPort(){
        var that =this;// //防止this指向问题// 后台需要的参数
        app.http.informPort({
            qymc:"",
            page:this.data.page,
            limit:this.data.limit,}).then(res =>{if(res.data.code =='10000'){if(res.data.data.records && res.data.data.records.length >0){// console.log("请求成功", res.data.data.records)this.data.page++;//新请求的数据通过cancat方法合并到list数组中
                    let list = that.data.list.concat(res.data.data.records)// 更新数据
                    that.setData({
                        list: list,
                        loading:false,});//如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样if(res.data.data.records.length <this.data.limit){
                        that.setData({
                            loading:false,
                            loaded:true,});}}else{
                    that.setData({
                        loaded:true,//显示 “没有数据” 字样 
                        loading:false//隐藏 “正在加载” 字样});}}})},// 触底函数---上拉加载onReachBottom(){
        let that =this;//防止this指向问题if(!that.data.loading){
            that.setData({
                loading:true,//加载中
                loaded:false//是否加载完所有数据});}//延时调用接口setTimeout(function(){
            that.informPort();},500)},// 上拉函数---下拉刷新onPullDownRefresh(){this.data.list =[]
        wx.showNavigationBarLoading()//在标题栏中显示加载圈圈this.setData({
            page:1});//重置页码
        app.http.informPort().then(res =>{if(res.data.code =='10000'){setTimeout(function(){
                    wx.showToast({
                        title:'刷新成功',
                        icon:'none',
                        duration:1000})
                    wx.hideNavigationBarLoading()//完成停止加载
                    wx.stopPullDownRefresh()//停止下拉刷新},1000)}elseif(res.data.code !=10000){setTimeout(function(){
                    wx.showToast({
                        title:'刷新失败',
                        icon:'none',
                        duration:1000})
                    wx.hideNavigationBarLoading()//完成停止加载
                    wx.stopPullDownRefresh()//停止下拉刷新},1000)}})}})

wxss文件

page {
    background: #EFF4FF;}.navBox {
    margin:2.5%;
    font-size:14px;
    border-radius:36rpx;
    background: white;}.lableBox {
    display:inline-block;
    width:90px;
    text-align: right;
    margin-right:30rpx;}.navBox view {
    padding:24rpx 30rpx;}.navBox view:not(:last-child){
    border-bottom:1px solid rgb(235,237,239);}.bomTxt {
    display: flex;
    justify-content: center;
    font-size:12px;
    color:rgb(126,138,155);
    padding:0rpx 0rpx 20rpx 0rpx;}

json文件

{"usingComponents":{},"navigationBarBackgroundColor":"#6197FB","navigationBarTitleText":"企业信息","enablePullDownRefresh":true,"backgroundTextStyle":"light","backgroundColor":"#6197FB"}