86 行
2.7 KiB
Plaintext
86 行
2.7 KiB
Plaintext
<template>
|
||
<enum-data title="android-nested-scroll（默认值为all）" :items="types" @change="onTypeChange"></enum-data>
|
||
<scroll-view style="flex:1;">
|
||
<view v-for="item in 5" class="scroll-item">
|
||
<text class="scroll-item-title">item{{item}}</text>
|
||
</view>
|
||
<web-view class="web-view" src="/hybrid/html/local.html" :android-nested-scroll="type"></web-view>
|
||
<view v-for="item in 5" class="scroll-item">
|
||
<text class="scroll-item-title">item{{item}}</text>
|
||
</view>
|
||
<web-view class="web-view" src="/hybrid/html/simple.html" :android-nested-scroll="type"></web-view>
|
||
<view v-for="item in 5" class="scroll-item">
|
||
<text class="scroll-item-title">item{{item}}</text>
|
||
</view>
|
||
<text style="color: coral;text-align: center;margin-top: 6px;">下面是测试嵌套横向滚动scroll-view的场景</text>
|
||
<scroll-view style="flex-direction: row;" direction="horizontal">
|
||
<view v-for="item in 5" class="scroll-item2">
|
||
<text class="scroll-item-title2">item{{item}}</text>
|
||
</view>
|
||
<web-view class="web-view" src="/hybrid/html/local.html" :android-nested-scroll="type"></web-view>
|
||
<view v-for="item in 5" class="scroll-item2">
|
||
<text class="scroll-item-title2">item{{item}}</text>
|
||
</view>
|
||
<web-view class="web-view" src="/hybrid/html/simple.html" :android-nested-scroll="type"></web-view>
|
||
<view v-for="item in 5" class="scroll-item2">
|
||
<text class="scroll-item-title2">item{{item}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-for="item in 5" class="scroll-item">
|
||
<text class="scroll-item-title">item{{item}}</text>
|
||
</view>
|
||
|
||
<bottom-safe-area />
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ItemType } from '@/components/enum-data/enum-data-types';
|
||
|
||
const types : ItemType[] = [{ "value": 0, "name": "all" }, { "value": 1, "name": "vertical" }, { "value": 2, "name": "horizontal" }, { "value": 3, "name": "none" }];
|
||
const type = ref("all");
|
||
|
||
const onTypeChange = (value : number) => {
|
||
type.value = types[value].name;
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.web-view {
|
||
width: 300px;
|
||
height: 300px;
|
||
margin-left: 6px;
|
||
margin-right: 6px;
|
||
margin-top: 6px;
|
||
border: black 1px solid;
|
||
align-self: center;
|
||
}
|
||
|
||
.scroll-item {
|
||
margin-left: 6px;
|
||
margin-right: 6px;
|
||
margin-top: 6px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.scroll-item2 {
|
||
width: 80px;
|
||
justify-content: center;
|
||
margin-left: 6px;
|
||
margin-right: 6px;
|
||
margin-top: 6px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.scroll-item-title {
|
||
line-height: 60px;
|
||
text-align: center;
|
||
color: #555;
|
||
}
|
||
|
||
.scroll-item-title2 {
|
||
text-align: center;
|
||
color: #555;
|
||
}
|
||
</style>
|