欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniapp 仿瀑布流效果

程序员文章站 2022-07-12 15:17:09
...

前言

  • Hbuilder X 2.7.14.20200618 (不清楚uniapp的版本,用工具版本代替)
  • 需求,如下图:
    uniapp 仿瀑布流效果

实现

数据文件 viewData.js

const flowList=[
	{
		title: '喜欢李白,张飞和刘备一起来打野,测试一下王者荣耀是否好玩,还要测试只显示两行文字多于三个点',
		image: '../../static/eg/viewList/1.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '望长城内外,惟余莽莽',
		image: '../../static/eg/viewList/2.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '大河上下,顿失滔滔',
		image: '../../static/eg/viewList/3.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '欲与天公试比高',
		image: '../../static/eg/viewList/4.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '须晴日,看红装素裹,分外妖娆',
		image: '../../static/eg/viewList/5.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '*如此多娇,引无数英雄竞折腰',
		image: '../../static/eg/viewList/6.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '惜秦皇汉武,略输文采',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '唐宗宋祖,稍逊风骚',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '一代天骄,成吉思汗',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '只识弯弓射大雕',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '俱往矣,数风流人物,还看今朝,还有多个点点点',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
];

export default {
	flowList,
}

vue 文件 flow.vue

<template>
	<view class="content">
		<view class="flowPanel">
			<view class="leftPanel">
				<view class="itemContainer" v-for="(item,index) in flowList" :key="index" v-if="index%2==0">
					<img :src="item.image" mode="widthFix">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<view class="left">
							<view class="date">{{item.date}}</view>
							<view class="commentNum">{{item.commentNum}}</view>
						</view>
						<view class="right">
							<view class="clickNum">{{item.clickNum}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rightPanel">
				<view class="itemContainer" v-for="(item,index) in flowList" :key="index" v-if="index%2==1">
					<img :src="item.image" mode="widthFix">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<view class="left">
							<view class="date">{{item.date}}</view>
							<view class="commentNum">{{item.commentNum}}</view>
						</view>
						<view class="right">
							<view class="clickNum">{{item.clickNum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataJson from './viewJson.js';
	export default {
		data() {
			return {
				flowList: [],
			}
		},
		async onLoad() {
			// load data
			this.flowList = dataJson.flowList;
		},
		methods: {
			
		}
	}
</script>

<style>
	@import "./flowPanel.css";
	
	@font-face {
		font-family: "myfont";
		src: url("https://at.alicdn.com/t/font_1985981_791yzf7neql.ttf") format('truetype');
	}
	
	page{
		height: 100%;
	}
	view{
		display:flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.content{
		width: 100%;
		background-color: #ffffff;
		padding: 0 15px;
	}
</style>

css 文件 flowPanel.css

@charset "utf-8";

.flowPanel {
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
}

.flowPanel .leftPanel {
	width: 48%;
	overflow: hidden;
}

.flowPanel .rightPanel {
	width: 48%;
	overflow: hidden;
}

.flowPanel .itemContainer {
	margin-top: 10px;
	position: relative;
	display:flex;
	flex-direction: column;
}
.flowPanel image {
	width: 100%;
}

.flowPanel .itemContainer .title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-wrap:break-word;
	word-break:break-all;
	color: #333;
	text-align: left;
	padding: 0.2em 0.5em;
}

.flowPanel .itemContainer .info {
	color: #8a8a8a;
	overflow: hidden;
	padding: 10px;
	border-top: 1px #e9e9e9 solid;
	flex-direction: row;
	justify-content: space-between;
}
.flowPanel .itemContainer .info .left {
	flex-direction: row;
}
.flowPanel .itemContainer .info .left .date {
	flex-direction: row;
	font-size: 11px;
	line-height: 11px;
}
.flowPanel .itemContainer .info .left .date:before {
	font-family: myfont;
	content: "\e63a"; 
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	padding-right: 2px;
}
.flowPanel .itemContainer .info .left .commentNum {
	padding-left: 5px;
	flex-direction: row;
	font-size: 11px;
	line-height: 11px;
}
.flowPanel .itemContainer .info .left .commentNum:before {
	font-family: myfont;
	content: "\e635";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	padding-right: 2px;
}
.flowPanel .itemContainer .info .right {
	flex-direction: row;
}
.flowPanel .itemContainer .info .right .clickNum {
	flex-direction: row;
	font-size: 11px;
	line-height: 11px;
}
.flowPanel .itemContainer .info .right .clickNum:before {
	font-family: myfont;
	content: "\e633";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	padding-right: 2px;
}

备注

制作图标库:https://www.jianshu.com/p/8e1f96c63092

相关标签: uniapp