【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(六）---文章编辑修改功能与局部刷新返回

打开edit.vue页面，先贴代码

edit.vue

<template>
	<view class="body">
		<!-- 显示区正式开始 -->
		<view class="myfrom">
			<form @submit="goLink">
				<textarea class="mytext" maxlength="-1" v-model="desc" placeholder="请输入文本" auto-height
					adjust-position />

				<view class="mybutton">
					<button type="primary" formType="submit">保存</button>
				</view>
			</form>
		</view>
		<!-- 显示区结束 -->
	</view>
</template>

<script>
	var _self, loginUID;
	var noteID, index;
	export default {
		data() {
			return {
				desc: ''
			}
		},
		methods: {
			goLink() {
				uni.request({
					url: _self.apiServer + 'edit',
					method: 'POST',
					header: {'content-type': "application/x-www-form-urlencoded"},
					data: {
						'uid': loginUID,
						'ID': _self.noteID,
						'txt': _self.desc
					},
					success: res => {
						//console.log(res);
						uni.showToast({title: "修改成功",icon: "none"});
						// 带参数返回
						uni.$emit('bindex', {
							'id': _self.index,
							'newtxt': _self.desc
						});
						uni.navigateBack();
					}
				});
			} //golink
		},
		onLoad: function(option) {
			_self = this;
			loginUID = _self.checkLogin('/index/index');
			if (!loginUID) {
				return;
			} else(console.log(loginUID));
			//以下是读取内容
			this.noteID = option.ID;
			this.index = option.index;
			uni.request({
				url: _self.apiServer + 'one',
				method: 'POST',
				header: {'content-type': "application/x-www-form-urlencoded"},
				data: {
					uid: loginUID,
					ID: this.noteID
				},
				success: function(res) {
					var newsListss = JSON.parse(res.data.datas); //将json对象解析成数组
					console.log(newsListss);
					if (res.data.result == 'ok') {
						//console.log(newsListss.mytxt);
						_self.desc = newsListss.mytxt;
					}
				}
			})
		}
	}
</script>

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

	.num {
		text-align: right;
		color: gray;
		font-size: 14px;
	}

	.mytext {
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 100%;
		min-height: 300px;

	}

	.mybutton {
		margin-top: 20px;
	}
</style>

可以看到，显示区与之前的 index.vue基本上完全一样

主要不同在于 功能区

onload，加了一个参数option

用来接收list页面 传来的慰问品，

 this.noteID = option.ID;  //文章ID
 this.index = option.index; //文章位置

接下，就要通过这个 文章ID，找到具体内容是什么，方法与之前的都一样，看代码就能明白

找到后，直接回显示到输入框里。

修改后，再次提交，同样的原理，保存到服务器，这里的新知识点是带点回礼(礼尚往来) 返回 list.vue 看日记页面。

uni.$emit('bindex', {
   'id': _self.index,
 'newtxt': _self.newtxt
 });
uni.navigateBack();

用到的功能是  uni.$emit , 这次是带上回礼： 一个文章位置（ id),一个新内容(newtxt)，送给谁呢？

送给list.vue页面中的  bindex 这个变量

我们回到 list.vue页面中，看到功能区<script>这里，已经 声明的一个 bindex，只不过在前面的功能中，一直没用到过。现在，要用它来接收 回礼，怎么接收呢，需要在 onload里增加接收功能：

onLoad() {
			   uni.$on("bindex", res => {
					_self.noteList[res.id].mytxt = res.newtxt
				}),

用到的uni.$on，传来的两个回礼打包到了res中，从res中分别取出来，再替换文章列表中对应位置的内容就可以，这样的好处是： 不刷新list页面，就看到最新修改过的内容。也就是说，之前我们都上拉到中间一页了，点修改后，还能回到之前看到的地方，而不是从新开始。

最后，我们粘上完整的 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 newsListss = JSON.parse(res.data.datas); //将json对象解析成数组
							//console.log(newsList);
			
							this.noteList = this.noteList.concat(newsListss); //将数据拼接在一起							
							uni.hideLoading();
							page++;
						}
					},
					complete: function() {
						uni.stopPullDownRefresh();
					}
				});
			},
			editOne: function(e) {
				var noteID = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index;
				uni.navigateTo({
					url: "../edit/edit?ID=" + noteID + "&index=" + index
				});
			},
			removeOne: function(e) {
				var noteID = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index;
				uni.showModal({
					title: "提示" + noteID,
				    content: "确定要删除吗?",
					success: function(e) {
						if (e.confirm == true) {
							uni.request({
								url: _self.apiServer + 'del',
								method: 'POST',
								header: {'content-type': "application/x-www-form-urlencoded"}, 
								data: {
									uid: loginUID,
									ID: noteID
								},
								success: function(res) {
									console.log(res);
									if (res.data.result == 'ok') {
										uni.showToast({title: "已删除",icon: "none"});
										_self.noteList.splice(index, 1);
									} else {
										uni.showToast({title: "删除失败",icon: "none"});
									}
								}
							});
						}
					},
				});
			}
		},
		onLoad() {
            uni.$on("bindex", res => {
			_self.noteList[res.id].mytxt = res.newtxt
			}),
			_self = this;
			loginUID = _self.checkLogin('/index/index');
			if (!loginUID) {return;	}else(console.log(loginUID));		
			this.goLink();	// 加载文章
		},
		onPullDownRefresh: function() {
			console.log("下拉");
			page = 1;
			this.noteList = [];
			this.goLink();
		},
		onReachBottom: function() {
			console.log("上拉");
			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>

本教程所有文件已可下载

零基本开发uniapp微信小程序教程源文件与数据库接口，简单易上手，不受版本限制-小程序文档类资源-CSDN下载