uniapp-滑动器scroll-view

uniapp-滑动器scroll-view"/>

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>