美文网首页
ios 小程序兼容问题(下拉刷新)

ios 小程序兼容问题(下拉刷新)

作者: web30 | 来源:发表于2021-06-30 23:08 被阅读0次

小程序下拉刷新步骤:

如需所有的页面都实现下拉刷新的话,那需要在全局文件app.json里的window里设置enablePullDownRefresh这个属性(与步骤1设置一样)。

  1. 对应页面的json文件中加入enablePullDownRefresh这个属性
{
    "enablePullDownRefresh": true,
     // 因为页面默认是白色,刷新时看不到加载的三个点点,所以把颜色设置为深色
    "backgroundTextStyle": "dark", // 这里只支持设置为light/dark
}
  1. 对应页面的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;
}
``

相关文章

网友评论

      本文标题:ios 小程序兼容问题(下拉刷新)

      本文链接:https://www.haomeiwen.com/subject/omsdultx.html