uniapp vue3下拉刷新

1.pages.json里面开启下拉刷新

 配置的页面里面写onPullDownRefresh方法实现下拉刷新

2.引入onPullDownRefresh

import { onPullDownRefresh } from '@dcloudio/uni-app';

注意:onPullDownRefresh与onMounted平级

编写代码:

onPullDownRefresh(() => {

代码片段.....

uni.stopPullDownRefresh() //停止刷新

})

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Uniapp是一种跨平台开发框架,可以用它来开发多个平台的应用,包括网站。如果你想在Uniapp中打包网站并实现下拉刷新,可以按照以下步骤进行操作: 1. 在pages文件夹下创建一个页面,例如下拉刷新的页面。 2. 在该页面.vue文件中引入uni-app官方提供的下拉刷新组件uni-scroll-view,并设置enable-back-to-top、scroll-Y和refresher-enabled属性,如下所示: <template> <uni-scroll-view class="scroll-view" enable-back-to-top scroll-Y :refresher-enabled="true" @refresher-refresh="onRefresh"> <div slot="refresher" class="uni-simple-refresh"></div> <div>这是一个下拉刷新的页面</div> </uni-scroll-view> </template> <script> export default { methods: { onRefresh() { // 在这里执行下拉刷新操作 } } } </script> <style> .scroll-view { height: 100%; } </style> 3. 在App.vue文件中引入mescroll.js插件,并在mounted生命周期函数中初始化,并传入需要下拉刷新的页面的ref属性,如下所示: <template> <div> <router-view></router-view> </div> </template> <script> import MeScroll from '@/common/mescroll.js' export default { mounted() { const refPage = uni.$refs['pullRefresh'] // 这里的'pullRefresh'就是页面中下拉刷新组件的ref属性 this.mescroll = new MeScroll(refPage) } } </script> 4. 最后,在manifest.json文件中将“provider”属性的值设置为h5,即"provider": "h5",打包出来的文件就是网站版的Uniapp应用了。 总之,通过以上步骤,你就可以在Uniapp框架中打包出一个支持下拉刷新的网站啦!
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值