使用的官方demo 也是无法滚动，华为mete40pro
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head title="scroll-view,区域滚动视图"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Vertical Scroll</text>
<text class="uni-subtitle-text">纵向滚动</text>
</view>
<view>
<scroll-view :scroll-top="scrollTop" direction="vertical" class="scroll-Y"
scroll-with-animation="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"
@scrollend="end" :show-scrollbar="showScrollbar" id="verticalScrollView">
<view class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-center uni-common-mt">
<text class="uni-link">点击这里返回顶部</text>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Horizontal Scroll</text>
<text class="uni-subtitle-text">横向滚动</text>
</view>
<view>
<scroll-view class="scroll-view_H" direction="horizontal" @scroll="scroll" @scrollend="end"
:scroll-left="scrollLeft" :show-scrollbar="showScrollbar">
<view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<navigator url="/pages/component/scroll-view/scroll-view-props" hover-class="none">
<button type="primary" class="button">
非下拉刷新的属性示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-refresher-props" hover-class="none">
<button type="primary" class="button">
下拉刷新的属性示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-refresher" hover-class="none">
<button type="primary" class="button"> 默认下拉刷新示例 </button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-custom-refresher-props" hover-class="none">
<button type="primary" class="button">
自定义下拉刷新示例
</button>
</navigator>
<view class="uni-common-pb"></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type ScrollEventTest = {
type : string;
target : UniElement | null;
currentTarget : UniElement | null;
direction ?: string
}
export default {
data() {
return {
scrollTop: 0,
oldScrollTop: 0,
scrollLeft: 120,
showScrollbar: true,
// 自动化测试
isScrollTest: '',
isScrolltolowerTest: '',
isScrolltoupperTest: '',
scrollDetailTest: null as UniScrollEventDetail | null,
scrollEndDetailTest: null as UniScrollEventDetail | null,
}
},
methods: {
upper: function (e : UniScrollToUpperEvent) {
console.log('滚动到顶部/左边', e)
this.checkEventTest({
type: e.type,
target: e.target,
currentTarget: e.currentTarget,
direction: e.detail.direction,
} as ScrollEventTest, 'scrolltoupper')
},
lower: function (e : UniScrollToLowerEvent) {
console.log('滚动到底部/右边', e)
this.checkEventTest({
type: e.type,
target: e.target,
currentTarget: e.currentTarget,
direction: e.detail.direction,
} as ScrollEventTest, 'scrolltolower')
},
scroll: function (e : UniScrollEvent) {
this.scrollDetailTest = e.detail
this.checkEventTest({
type: e.type,
target: e.target,
currentTarget: e.currentTarget
} as ScrollEventTest, 'scroll')
this.oldScrollTop = e.detail.scrollTop
},
end: function (e : UniScrollEvent) {
console.log('滚动结束时触发', e)
this.scrollEndDetailTest = e.detail
this.checkEventTest({
type: e.type,
target: e.target,
currentTarget: e.currentTarget
} as ScrollEventTest, 'scrollend')
},
goTop: function () {
// 解决view层不同步的问题
this.scrollTop = this.oldScrollTop
this.$nextTick(() => {
this.scrollTop = 0
})
uni.showToast({
icon: 'none',
title: '纵向滚动 scrollTop 值已被修改为 0',
})
},
// 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）
checkEventTest(e : ScrollEventTest, eventName : String) {
// #ifndef MP
const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;
// #endif
// #ifdef MP
const isPass = true
// #endif
const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;
switch (eventName) {
case 'scroll':
this.isScrollTest = result
break;
case 'scrolltolower':
this.isScrolltolowerTest = result + `-${e.direction}`
break;
case 'scrolltoupper':
this.isScrolltoupperTest = result + `-${e.direction}`
break;
default:
break;
}
},
// 自动化测试专用
setVerticalScrollBy(y : number) {
const element = uni.getElementById("verticalScrollView")
if (element != null) {
element.scrollBy(0, y)
}
}
},
}
</script>
<style>
.scroll-Y {
height: 150px;
}
.scroll-view_H {
width: 100%;
flex-direction: row;
}
.scroll-view-item {
height: 150px;
justify-content: center;
align-items: center;
}
.scroll-view-item_H {
width: 100%;
height: 150px;
justify-content: center;
align-items: center;
}
.text {
font-size: 18px;
color: #ffffff;
}
.button {
margin-top: 15px;
}
</style>
0 个回复