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

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

完整代码

 

1

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

​

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

 

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

 

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

 

1

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

 

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