随笔 - 44  文章 - 0  评论 - 5  阅读 - 70070

uni-app 小程序实现scroll-view 横向滑动效果的坑

最大盒子要100%高度,scroll-view的宽度不能设置固定宽度;

复制	<scroll-view class="bottomBox" scroll-x="true" @scroll="scroll">
		<view @click="go(i)" class="commodity" v-for="(item,i) in list" :key="i">
			{{item.title}}
		</view>
	</scroll-view>

list: [{
						id: 1,
						title: "111"
					}, {
						id: 2,
						title: "2222"
					}, {
						id: 3,
						title: "3333"
					}, {
						id: 4,
						title: "3333"
					},
					{
						id: 5,
						title: "3333"
					},
				],

此外无论是组件还是写在一个页面内 最大的盒子记得加上height:100%;

.bottomBox {
			width: 100%; // 一定不能给固定宽度,会失效
			height: 100%;
			background-color: aqua;
			white-space: nowrap; //这个属性一定要添加
			padding: 20upx;

			.commodity {
				display: inline-block;//这个也是一定要添加的
				width: 196upx;
				height: 360upx;
				margin-right: 11upx;
				background-color: pink;
			}
		}
posted on   哼着老调调  阅读(2582)  评论(0编辑  收藏  举报
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

欢迎阅读『uni-app 小程序实现scroll-view 横向滑动效果的坑』
聊天   切换waifu!  换衣服!   拍照!   许愿吧cxy
点击右上角即可分享
微信分享提示