uni-app + VUE3+微信小程序 实现下拉刷新功能

  1. pages.json文件配置下拉属性"enablePullDownRefresh": true 
"pages": [ 
        {
            "path": "pages/ychPages/newIndex/newIndex",
            "style" : {
                "navigationStyle": "custom",
                "enablePullDownRefresh": true
            }
        }]
  1. 对应文件增加下拉钩子和调用销毁下拉函数
import { onLoad, onLaunch,onShow,onPullDownRefresh} from "@dcloudio/uni-app"
onPullDownRefresh(async (query) => {
     initData();
}) 

async function initData() {
    let {data:res} = await request_get_getChargeUsage({ restAreaId:myLocation.restAreaId,distributionId:myLocation.distributionId})
    if(res.code = '1001'){
        gasList.value = res.data;
    }
     //停止刷新
    uni.stopPullDownRefresh()
}

遇到的问题，当模版文件中存在scroll-view时，下拉刷新失效，下拉刷新事件与scroll-view下拉滚动事件冲突。下拉位置需要在小程序头部才生效，下拉中间屏幕不起作用。避免使用scroll-view,内容超长时，自定义滚动即可。

       <view class="main mainScrollView">
<!-- <scroll-view scroll-y> -->
                    <view class="itemBox">
                        <view class="itemBox-btn">
                            <image :src="area.src[0]" mode="scaleToFill" v-if="area && area.src"></image>
                        </view>
                    </view>
 <!-- </scroll-view> -->
                
            </view>

.mainScrollView{
    height: 100vh;
    overflow-y: auto;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容