vue3.0使用van-pull-refresh,与页面滚动事件冲突,滚动数据,会触发刷新

2 篇文章 0 订阅

遇到的问题:vue3.0使用van-pull-refresh,与页面滚动事件冲突,滚动数据,会触发刷新
解决方案:
1.van-pull-refresh加上disabled,限制它是否可以滚动

<van-pull-refresh
     v-model="loadingRefresh"
      success-text="刷新成功"
      :disabled="refreshDisabled"
      @refresh="onRefresh"
  >
 <div v-if="list.length>0" ref="content">
   <div  v-for="(item,index) in list" :key="index">
   </div>  
 </div>
</van-pull-refresh>        

2.添加事件监听滚动,获取滚动距离,设置disabled

const refreshDisabled = ref(false);
const content = ref();
const loadingRefresh = ref(false);
const scroll = (event) => {
  const scrollTop = event.target.scrollTop
  if(scrollTop<=0){
    refreshDisabled.value = false
  }else{
    refreshDisabled.value = true
  }
}
onMounted(async()=>{
  content.value.addEventListener('scroll', scroll)
})
const onRefresh = () => {
   setTimeout(() => {
     showToast('刷新成功');
     loadingRefresh.value = false;
   }, 1000);
 };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3.0是一种流行的JavaScript框架,用于构建用户界面。它具有响应式数据绑定和组件化的特性,使得开发者可以更轻松地构建交互式的Web应用程序。 Vue-video-player是一个基于Vue.js的视频播放器组件,它提供了一种简单的方式来在Vue应用程序中嵌入视频播放功能。它支持多种视频格式,包括MP4、WebM和Ogg等,并且提供了丰富的功能选项,如自定义控制条、全屏模式、播放速度调节等。 使用vue-video-player,你可以按照以下步骤来集成视频播放器到你的Vue 3.0应用程序中: 1. 首先,安装vue-video-player包。你可以使用npm或者yarn来进行安装: ``` npm install vue-video-player ``` 或者 ``` yarn add vue-video-player ``` 2. 在你的Vue组件中引入vue-video-player: ```javascript import VueVideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; // 引入视频播放器样式 import 'vue-video-player/src/custom-theme.css'; // 引入自定义主题样式 export default { components: { VueVideoPlayer, }, // ... } ``` 3. 在模板中使用vue-video-player组件: ```html <template> <div> <vue-video-player :options="playerOptions"></vue-video-player> </div> </template> ``` 4. 在Vue组件的data选项中定义视频播放器的配置选项: ```javascript export default { data() { return { playerOptions: { sources: [{ src: 'path/to/your/video.mp4', type: 'video/mp4', }], // 其他配置选项... }, }; }, // ... } ``` 这样,你就可以在Vue应用程序中使用vue-video-player来播放视频了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值