照相
照相
  • 发布:2022-09-19 23:03
  • 更新:2022-09-22 10:22
  • 阅读:229

在nvue+安卓中,scroll-view的scroll-x属性若由false延时设置为true,横向滚动会失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.6

HBuilderX类型: 正式

HBuilderX版本号: 3.6.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 荣耀X30

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:

运行demo至安卓真机,查看scroll-view是否可以横向滚动,无法横向滚动。

预期结果:

运行demo至安卓真机,查看scroll-view是否可以横向滚动,预期可以横向滚动。

实际结果:

运行demo至安卓真机,查看scroll-view是否可以横向滚动,无法横向滚动。

bug描述:

在nvue+安卓中,scroll-view的scroll-x属性若由false延时设置为true,横向滚动会失效

2022-09-19 23:03 负责人:无 分享
已邀请:
CODE_XU

CODE_XU

理论上这个属性是不能动态设置的,如果你想实现这个效果,可以这样做:

<scroll-view v-if="isShow" :scroll-x="scrollX">  
this.isShow = false;  
this.scrollX = true;  
this.$nextTick(() => {  
	this.isShow = true;  
})

不过这样会闪一下,并且会重置到最左侧,这也许是暂时可实现的一个方式

  • 照相 (作者)

    好的,谢谢


    2022-09-22 17:42

照相

照相 (作者)

这个有解决方案吗?~

照相

照相 (作者)

这个有解决方案吗?~

要回复问题请先登录注册