主要点：
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>