1、新闻列表模式

效果图：
在这里插入图片描述

代码

<template>
	<uni-list>
		<!-- title、note设置标题和小文字 -->
		<uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date">
			<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
			<template v-slot:header>
				<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
				<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
			</template>
		</uni-list-item>
	</uni-list>

</template>

<script>
	export default {
		data() {
			return {
				info: [{
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
					{
						"user_name": "36氪深度服务",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"last_modify_date": "2020-04-11 17:03:18",
					}, {
						"user_name": "未来汽车日报",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 16:11:11",
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-1 {
		flex-shrink: 0;
		margin-right: 10px;
		width: 125px;
		height: 75px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>

还需要这两个文件：
在这里插入图片描述

2、文字列表模式（可添加自定义图片）

在这里插入图片描述

代码：

<template>
	<uni-list>
		<view v-for="item in info" class="view_tupian_wenzi" bindtap="click" >
			<!-- 包裹两行文字 -->
			<view class="view_wenzi2">
				<text>{{item.title}}</text>
				<text class="text_small">{{item.detail}}</text>
			</view>
		</view>
	</uni-list>


</template>

<script>
	export default {
		data() {
			return {
				info: [{
						"title": "wifi名称：FSlihua1",
						"detail": "A1:84:12:8C"
					},
					{
						"title": "wifi名称：CMCC-fslihua",
						"detail": "B1:84:12:83"
					}, {
						"title": "wifi名称：FSlihua_guest",
						"detail": "C1:84:12:8D"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}


	.view_tupian_wenzi {
	  height: 120rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  
	  /* 圆角 */
	  border-radius: 18rpx;
	
	  /* 边 */
	  border: 1rpx solid #E0E3DA;
	  /* 阴影 */
	  box-shadow:2rpx 6rpx 0rpx #e5e8df;
	
	  background-color: #ffffff;
	  margin: 30rpx;
	
	  /* padding使得文字和图片不至于贴着边框 */
	  padding: 25rpx;
	
	}
	
	/* 包裹两行文字 */
	
	.view_wenzi2 {
	  width: 100%;
	  margin-left: 25rpx;
	  display: flex;
	  flex-direction: column;
	}
	
	/* 小字 */
	
	.text_small {
	  font-size: 30rpx;
	  word-break: break-all;
	  color: #7a7878;
	  margin-top: 10rpx
	}
</style>

3、顶部下拉刷新

在page.json中添加：

"enablePullDownRefresh": true  //设置为true表示当前页面开启下拉刷新

在这里插入图片描述
在methods: {｝里添加

/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				console.log("下拉刷新")
			},

4、完整的下拉刷新，上拉加载更多的联动

在这里插入图片描述

<template>
	<view>
		<!-- 顶部提示 -->
		<tui-tips ref="toast"></tui-tips>

		<uni-list>
			<!-- title、note设置标题和小文字 -->
			<uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date">
				<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
				<template v-slot:header>
					<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
					<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<uni-load-more  :status="statusLoadMore" />

	</view>
</template>

<script>
	export default {

		data() {
			return {				
				statusLoadMore:"more",//more,loading,nomore
				info: [{
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
					{
						"user_name": "36氪深度服务",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"last_modify_date": "2020-04-11 17:03:18",
					}, {
						"user_name": "未来汽车日报",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 16:11:11",
					},
					{
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
					{
						"user_name": "36氪深度服务",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"last_modify_date": "2020-04-11 17:03:18",
					}, {
						"user_name": "未来汽车日报",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 16:11:11",
					}, {
						"user_name": "未来汽车日报",
						"title": "为什么自动驾驶诉讼不断？",
						"avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"last_modify_date": "2020-04-11 17:11:09",
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				console.log("下拉刷新")
				var that = this
				setTimeout(function() {
					// 顶部提示
					let options = {
						msg: "加载成功~",
						duration: 2000,
						type: "green"
					};
					that.$refs.toast.showTips(options);

					//隐藏转圈动画
					uni.stopPullDownRefresh()
				}, 2000)

			},
			/**
			 * 上拉加载更多
			 */
			onReachBottom() {
				console.log("上拉加载更多")
				// 显示加载中
				this.statusLoadMore = "loading"
				var that = this

				setTimeout(function() {	
					// 显示没有更多数据了
					that.statusLoadMore = "nomore"
				}, 2000)
			},
		}
	}
</script>

<style >
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-1 {
		flex-shrink: 0;
		margin-right: 10px;
		width: 125px;
		height: 75px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>

代码下载地址为：https://download.csdn.net/download/wy313622821/13569533

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign