uni-app設置scroll-view 橫向滾動

在uni的入坑第一天就碰見一個小問題。
scroll-view 可視區域滾動組件 豎向滾動好說

// 給scroll-view設置一個高度就可以
<scroll-view scroll-y="true">
	<view class="item1">
		
	</view>
	<view class="item2">
		
	</view>
	<view class="item3">
		
	</view>
</scroll-view>
// 樣式
scroll-view{
	width: 100%;
	height: 300rpx;
}

但是橫向設置滾動的時候就有問題 滾動不了 我先展示下 解決方法的代碼
後來才知道 原來 scroll-view 裏面的是 塊元素 我想着既然橫向滾動 我就讓他彈性佈局 子元素橫向佈局 但是 設置之後 不生效 只好使用子元素: display:inline-block;
scroll-view: white-space:nowrap;
這樣就可以實現了.
還有一點就是 裏面的 子元素寬度總和 最好要超過 父元素 要不怎麼橫向滾動的是吧

<scroll-view scroll-x="true">
	<view class="item1">
		
	</view>
	<view class="item2">
		
	</view>
	<view class="item3">
		
	</view>
</scroll-view>

scroll-view{
		width: 100%;
		height: 300rpx;
		white-space: nowrap;
	}
	.item1,.item2,.item3{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.item1{
		background-color: #007AFF;
	}
	.item2{
		background-color: #333333;
	}
	.item3{
		background-color: #4CD964;
	}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章