uni-app：使用scroll-view实现横向滚动

一、要实现的效果如下：

二、代码实现：

tips：
1.scroll-view，必须设置：white-space: nowrap;
2.item布局最外层，必须为行内布局，例如：inline-block 或 inline-flex

2.1 html代码：

<scroll-view :scroll-x="true" class="scrollview-box">
	<block v-for="item in scroll_list" :key="item">
		<view class="item">
			<text class="name">{
    
    {
    
    item}}</text>
		</view>
	</block>
</scroll-view>

2.2 js代码：

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				scroll_list: ['1', '2', '3', '4', '5', '6']
			}
		},
	}
</script>

2.3css代码：

	.scrollview-box {
    
    
		white-space: nowrap;
		/* 滚动必须加的属性 */
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}

	.item {
    
    
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column;
		align-items: center;
		background-color: red;
	}

	.cover {
    
    
		width: 165rpx;
		height: 165rpx;
	}

	.name {
    
    
		font-size: 24rpx;
		color: #000000;
		padding: 0;
		width: 90%;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

ending~