微信小程序实现上拉加载下拉刷新（即粘即用）
Posted 水星记_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序实现上拉加载下拉刷新（即粘即用）相关的知识，希望对你有一定的参考价值。
前言
去年有出过一篇关于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)
else if (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"
以上是关于微信小程序实现上拉加载下拉刷新（即粘即用）的主要内容，如果未能解决你的问题，请参考以下文章