uniapp中常用的九宫格和列表布局（包含超出文字改为省略号）

先看代码，复制使用即可，下文中您即将找到一些您很非常常用的界面样式，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）（其他诸如UI框架涵盖的内容，样式效果这里将不再赘述，下面我将会整理一个目录供您快速浏览使用）九宫格布局// tetemplate<view class="Grid"><view class="Grid-Item" v-fo

莫成尘

13742人浏览 · 2020-08-26 11:20:20

莫成尘 · 2020-08-26 11:20:20 发布

先看代码，复制使用即可，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）

目录如下：

九宫格布局
常见列表布局

九宫格布局

一个可以进行for循环的九宫格

// tetemplate
<view class="Grid">
	<view class="Grid-Item" v-for="item in List" :key="item.id">
		<view class="GSimg"><image class="Image" :src="item.img"></image></view>
	    <view class="GStitle">{{ item.title }}</view>
	</view>
</view>
//script
List:[
		{id:1,img:'../../static/logo.png',title:'九宫格布局1'},
		{id:2,img:'../../static/logo.png',title:'九宫格布局2'},
		{id:3,img:'../../static/logo.png',title:'九宫格布局3'},
		{id:4,img:'../../static/logo.png',title:'九宫格布局4'},
		{id:5,img:'../../static/logo.png',title:'九宫格布局5'},
		{id:6,img:'../../static/logo.png',title:'九宫格布局6'},
		{id:7,img:'../../static/logo.png',title:'九宫格布局7'},
		{id:8,img:'../../static/logo.png',title:'九宫格布局8'}
   ]
//style
.Grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		background: #f7f7f7;
		padding:10rpx 0;
		.Grid-Item {
			width: 25%;
			height: 213rpx;
			text-align: center;
			border:1rpx solid #ccc;
			box-sizing:border-box;
			.GSimg {
				width: 96rpx;
				height: 96rpx;
				margin-top: 42rpx;
				margin-left: 50rpx;
				.Image {
					width: 96rpx;
					height: 96rpx;
				}
			}
			.GStitle {
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
				color: #06121e;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}

展示列表布局

这是展示性列表

// template
<view class="MsgList">
	<view class="MlSon" v-for="item in List" :key="item.id">
		<view class="MlSonvBox">
			<view class="SonOfImg">
				<image class="Img" :src="item.img"></image>
			</view>
			<view class="SonOfName">
				<view class="SNTop">
					{{item.title}}
				</view>
				<view class="SNBom">
					<view class="SBleft">
						左边信息
					</view>
					<view class="SBright">
							右边信息
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
//script
List:[
	{id:1,img:"../../static/logo.png",title:"这是标题超出两行的部分会被作为省略号隐藏，您也可以根据需求将其设为超出一行隐藏",msg:"这是提示信息"},
	{id:2,img:"../../static/logo.png",title:"这是标题超出部分会被作为省略号隐藏",msg:"这是提示信息"},
	]
//style
$max:100%;
.MsgList {
	width: 92%;
	margin-left:4%;
	max-width:690rpx;
	height: auto;
	.MlSon {
		border-radius: 12rpx;
		.MlSonvBox {
			padding: 24rpx 32rpx;
			height: 168rpx;
			display: flex;
			justify-content: space-around;
			background: #fff;
 			border:1px solid red;
			margin-top:10px;
			.SonOfImg {
				border:1px solid red;
				width: 164rpx;
				height: $max;
				border-radius: 12rpx;
				overflow: hidden;
				.Img {
					width: $max;
					height: $max;
				}
			}
			.SonOfName {
				width: 428rpx;
				height: $max;
				.SNTop {  //这部分是标题 我将其设置为超出两行隐藏掉您可根据需求设置为一行
					width: $max;
					height: 88rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 44rpx;
					color: #06121E;
					font-size: 28rpx;
				}
				.SNBom {
					width: $max;
					height: 34rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 18rpx;
					.SBleft {  //这里预留了底部左右信息的样式处理
					}
					.SBright {
					}
					}
				}
			}
		}
	}