uniapp

主要点：

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>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879

网址：uniapp https://www.yuejiaxmz.com/news/view/12611

相关内容

基于安卓APP/微信小程序的个人财务管理系统（源码+文档+部署+讲解）

随便看看