1.需要在 uniapp 项目pages.json中,添加属性 "disableScroll": true,官方声明需要放在每一个,其实全局也是可以使用这个属性
2. 需要用到uniapp 官方滑动组件 scroll-view | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/scroll-view.html
将其封装成公共组件调用
<template>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{height: scrollHeight + 'px'}"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<slot name="scrllow" />
</scroll-view>
</view>
</template>
<script>
export default {
props: {
// 需要滑动的高度
scrollHeight: {
type: Number,
default: ''
},
},
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
},
windowHeight: '',
}
},
methods: {
upper: function(e) {
// console.log(e)
},
lower: function(e) {
// console.log(e)
},
scroll: function(e) {
// console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
<style>
page {}
.swiper-action {
touch-action: none;
}
</style>
在你想使用的组件直接引用,c传入高度即可实现滑动
vue
<scrllow :scrollHeight="windowHeight">
<view slot="scrllow"></view>
</scrllow>
import scrllow from '@/components/scrllow/scrllow.vue'
data(){
return{
windowHeight: ''
}
}
components: {
scrllow
},