问题描述: 微信小程序的自定义导航栏出发原生下拉事件的时候会导致自定义导航栏一起下拉,开发者工具不会,但是真机调试以及二维码调试都会出现这个问题(微信官方的锅,而且7年前的问题到现在还没修复)
解决方法:我试过了很多不用原生滚动组件的方法,但是无疑例外都是失败了,例如fixed固定,封装成组件引入使用,各种机型top适配,到最后还是决定这个下拉事件还是得自己去写一个
<scroll-view
scroll-y
style="height: 100vh;"
bindscrolltolower="scrollToLower"
refresher-enabled="{{true}}"
refresher-triggered="{{loading}}"
bindrefresherrefresh="onScrollRefresh">
<!-- 下拉刷新提示 -->
<view class="refresh-loading" wx:if="{{loading}}">
<text>加载中...</text>
</view>
<!-- 数据列表 -->
<view wx:for="{{dataList}}" wx:key="id" class="item">
<text>{{item.title}}</text>
</view>
<!-- 加载更多提示 -->
<view class="load-more" wx:if="{{loading}}">
<text>加载中...</text>
</view>
<view class="no-more" wx:if="{{!hasMore}}">
<text>没有更多数据了</text>
</view>
</scroll-view>
使用原生scroll-view 标签开启自定义下拉和上拉刷新,再自己定义刷新事件和加载的状态效果就完成了
踩坑记录:有一个问题,当你先使用上拉加载再回到顶部的时候,会发现scroll-view的顶部安全距离不会生效,这是因为重新渲染加载会导致外围样式失效,可以去开发工具选择看,安全距离写了但是样式并没有生效,这个时候你可以选择外围包裹一层view标签,然后把scroll-view放进去就可以了,如果还是不行,可以联系博主帮你看看