uniapp-滑动器scroll-view

主要点：

1.scroll-x=“true”

2./* 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。 */
white-space: nowrap；【写于scroll-view】

3.内容：display: inline-block;

<template>
	<view>

		<view>
			<view>
				<!-- scroll-left="120"；右边的元素上来的距离 -->
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(huadong,index) in huadongs" :key="index">
						<view>x</view>
						<view><image :src="huadong.img" mode=""></image></view>
						<view>{{huadong.name}}</view>
						<view>{{huadong.info}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				huadongs:[
					{img:'../../static/logo.png',name:'舟舟',info:'xxxxxxxx'},
					{img:'../../static/logo.png',name:'舟舟',info:'xxxxxxxx'},
					{img:'../../static/logo.png',name:'舟舟',info:'xxxxxxxx'},
					{img:'../../static/logo.png',name:'舟舟',info:'xxxxxxxx'},
					{img:'../../static/logo.png',name:'舟舟',info:'xxxxxxxx'},
					{img:'../../static/logo.png',name:'舟舟',info:'xxxxxxxx'},
					]
				}
		},
		methods: {
			
			}
	}
</script>

<style>
	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 35%;
		height: 300upx;
		border: 1upx solid;
		text-align: center;
		font-size: 36upx;
		margin: 2%  1% 2% 1%;
	}
	.scroll-view-item_H view{
		box-sizing: border-box;
	}
	.scroll-view-item_H view:nth-child(1){
		width: 100%;
		text-align: right;
		padding: 1% 4%;
	}
	.scroll-view-item_H view:nth-child(2){
		width: 100%;
		height: 120upx;
	}
	.scroll-view-item_H view:nth-child(2) image{
		width: 100upx;
		height: 100upx;
	}
	.scroll-view-item_H view:nth-child(3){
		width: 100%;
		height: 50upx;
	}
	.scroll-view-item_H view:nth-child(4){
		width: 100%;
		height: 50upx;
	}
</style>