<template>
<scroll-view class="scroll-view" :scroll-x="scrollX">
<view style="flex-direction: row;width:1000px;">
<view class="item" v-for="(item,index) in list" :key="index">
{{item}}
</view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
list: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
scrollX: false
}
},
onLoad() {
// 如果这里延时500毫秒将scrollX设置为true,则不会生效,依然无法横向滚动。如果不延时,直接设置scrollX为true,则正常
setTimeout(() => {
this.scrollX = true;
},500)
},
methods: {
}
}
</script>
<style>
.item{
background-color: red;
width: 100rpx;
margin-right: 10rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: white;
}
.scroll-view{
flex: 1;
background-color: yellow;
height: 120rpx;
}
</style>
- 发布:2022-09-19 23:03
- 更新:2022-09-22 10:22
- 阅读:229
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 12.6
HBuilderX类型: 正式
HBuilderX版本号: 3.6.3
手机系统: Android
手机系统版本号: Android 11
手机厂商: 华为
手机机型: 荣耀X30
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行demo至安卓真机,查看scroll-view是否可以横向滚动,无法横向滚动。
运行demo至安卓真机,查看scroll-view是否可以横向滚动,无法横向滚动。
预期结果:
运行demo至安卓真机,查看scroll-view是否可以横向滚动,预期可以横向滚动。
运行demo至安卓真机,查看scroll-view是否可以横向滚动,预期可以横向滚动。
实际结果:
运行demo至安卓真机,查看scroll-view是否可以横向滚动,无法横向滚动。
运行demo至安卓真机,查看scroll-view是否可以横向滚动,无法横向滚动。
照相 (作者)
好的,谢谢
2022-09-22 17:42