直播app开发搭建，scroll-view封装自定义下拉刷新

直播app开发搭建，scroll-view封装自定义下拉刷新

完整代码

<!-- container.vue -->
<template>
<view>
<scroll-view
scroll-y="true"
class="scroll-view"
:refresher-enabled="refresh"
:refresher-triggered="triggered"
:refresher-threshold="60"
style="white-space: nowrap;display: flex;overflow: hidden;"
@refresherrefresh="onRefresh()"
@refresherrestore="onRestore()"
>
<!-- slot默认插槽 -->
<slot></slot>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
onRefreshing: false,
triggered: false
}
},
props: {
refresh: {
type: Boolean,
default: false
}
},
methods: {
onRefresh() {
if (this.onRefreshing) return
this.onRefreshing = true
if (!this.triggered) this.triggered = true
this.$emit('Refresh')
},
onRestore() {
this.triggered = false
},
close() {
//设置定时器一秒钟关闭刷新状态（根据自己需求）
setTimeout(() => {
this.triggered = false
this.onRefreshing = false
}, 1000)
}
}
}
</script>
<style scoped>
.container {  // 这里可以将整个封装的组件也作为一个容器
width: 100%;
height: calc(100vh - 90rpx);
position: relative;
overflow: hidden;
.scroll-view {
height: 100%;
}
}
</style> 

​

接下来我们需要在main.js将我们写好的组件组注册为全局组件（根据自己需求是否需要全局组件）

// main.js
import Container from 'components/container/index.vue'
Vue.component('Container', Container)
 

下面我们就在页面中实际使用

<template>
<view>
<!-- :refresg：这里是是否开启刷新 @Refresg：下拉刷新开始所执行的操作 -->
<!-- 这里如果不需要下拉刷新也可当容器使用 -->
<!-- <Container></Container> 只需要这样写就可以了 -->
<Container ref="containerRef" :refresh="true" @Refresh="Callback">
<!-- 这里正常写我们的代码就可以 -->
</Container>
</view>
</template>
<script>
export default{
data(){
return{}
},
methods:{
Callback(){
// 这里我们要去调用关闭下拉刷新状态的函数
// 使用子组件的ref属性
this.$refs.containerRef.close()
}
}
}
</script>

 以上就是 直播app开发搭建，scroll-view封装自定义下拉刷新，更多内容欢迎关注之后的文章