【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(四）---文章数据显示

本文链接：https://blog.youkuaiyun.com/goolean/article/details/124990183

这一节主要是看日记的页面 list.vue 制作，内容比较多，二话不说，我们先上代码，同样把上一节的index.vue 代码拷贝过来,全部替换，再修改成如下，或直接将下面代码拷贝过去

list.vue

<template>
	<view class="body">
		<!-- 显示区正式开始 -->
		<view class="note-list">
			<view class="note-item" v-for="(item,index) in noteList" :key="index">
				<view class="note-txt">
					<text class="" space="ensp" user-select="true">{{item.mytxt}}</text>
				</view>
				<view class="note-tool">
					{{item.mytime}}
					<view class="" style="float: right;">
						<text :data-id="item.id" :data-index="index" @tap="editOne">修改</text> | <text :data-id="item.id" 	:data-index="index" @tap="removeOne">删除</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 显示区结束 -->
	</view>
</template>

<script>
var _self,loginUID;	
var bindex, page = 1;
	export default {
		data() {
			return {
				noteList: []
			}
		},
		methods: {
			goLink: function() {
				uni.showLoading({
					'title': "加载中..."
				});
				uni.request({
					url: _self.apiServer + 'view&page=' + page,
					method: 'POST',
					header: {'content-type': "application/x-www-form-urlencoded"},
					data: {
						'uid': loginUID
					},
					success: res => {
						//console.log(res);
						if (res.data.result == 'empty') {
							uni.showToast({title: "已经加载全部内容",icon: "none"});
						} else if (res.data.result == 'ok') {
			
							var newsList = JSON.parse(res.data.datas); //将json对象解析成数组
							//console.log(newsList);
			
							this.noteList = this.noteList.concat(newsList); //将数据拼接在一起							
							uni.hideLoading();
							page++;
						}
					},
					complete: function() {
						uni.stopPullDownRefresh();
					}
				});
			}
		},
		onLoad() {
			_self = this;
			loginUID = _self.checkLogin('/index/index');
			if (!loginUID) {return;	}else(console.log(loginUID));		
			this.goLink();	// 加载文章
		}
	}
</script>

<style>
	.body {
		margin: 10px;
	}

	.note-item {
		padding: 2px;
		margin-bottom: 15px;
		background-color: #e6e9f0;
		border-radius: 10px;
		border: 2upx solid #ccc;
		color: #000000;
		line-height: 25px;
		font-size: 12px;
	}

	.note-txt {
		padding: 10px;
		font-size: 16px;
		color: #333;
	}

	.note-tool {
		padding: 2px;
		font-size: 14px;
		color: #ccc;

	}
</style>

看日记页面的功能，就是把服务上数据库里数据读出来，大白话就是给服务器发个信息：”请把按我要求订的货发给我“，我们的指令就是 url: _self.apiServer + 'view&page=' + page ，指我要看第几页的数据。

data() {
           return {
               noteList: [] //页面一开始，我们准备一个空箱子来接收数据
           }
       },

服务器正常营业的情况下，通过 success: res => 把商品(res.data.datas)发回来，并贴上标签（res.data.result），有货 ok ，或没货 empty。
有货的情况，我把这些货拆分成一个一个商品（JSON.parse(res.data.datas)），再分别按顺序（index）放到我们事先准备好的箱子noteList里。

接下来我们就在显示区把货品展示出来，来看显示区，在负责显示的view class="note-item" 上，有这样一行 v-for="(item,index) in noteList" :key="index" 其中的v-for表示这一个循环读取的过程，这句话翻译过来就是从 noteList 的箱子中，依次按顺序（index) 取出来，并给货品临时起个小名叫 item。
这样以来，就分别把第一个item, 第二个item ... 都显示出来了

其它知识点，参考之前两节内容或注释