小程序下拉刷新步骤:
如需所有的页面都实现下拉刷新的话,那需要在全局文件app.json里的window里设置enablePullDownRefresh这个属性(与步骤1设置一样)。
- 对应页面的json文件中加入enablePullDownRefresh这个属性
{
"enablePullDownRefresh": true,
// 因为页面默认是白色,刷新时看不到加载的三个点点,所以把颜色设置为深色
"backgroundTextStyle": "dark", // 这里只支持设置为light/dark
}
- 对应页面的js文件中写相关逻辑
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
// 需要将要加载的函数在onPullDownRefresh()这个方法里面调用。
onPullDownRefresh: function () {
this.getWaitAdmission() // 你要下拉刷新调的接口
// 下拉刷新完后停止刷新,避免一直刷新
wx.stopPullDownRefresh()
},
完成以上步骤就可实现下拉刷新了~
在此期间遇到的问题:
ios端,页面无法下拉刷新(就是根本下拉不了,触发不了事件)。只有当右侧的滚动条滚动到底部后,再下拉刷新时才有效果。安卓端是没有问题的。
但是,开发者工具上测试一直都是没有问题的。
问题的原因:
是因为在首页上父元素用到了绝对定位( position: fixed),导致了ios端无法下拉刷新,把绝对定位改为相对定位就可以了(position: relative)。
<view class="wrap">
// doing someing
</view>
// wxss
.wrap{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background: #F7F7F7;
/* position: fixed; */ // 如不是很熟练的话,建议尽量少用position: fixed
position: relative;
overflow: auto;
}
``
网友评论