【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(五）---上拉加载下拉刷新与删除

当内容比较多时，我们需要上拉显示更多内容，下拉刷新显示最新内容，本节就实现这个功能。

首先，要设置允许 list.vue页面有下拉功能，打开page.json，在pages 中，找到 list所在那一行，修改为

"path": "pages/list/list",
"style": {
"navigationBarTitleText": "看日记",
"enablePullDownRefresh": true
}

再在 pages[

....],

最后面添加一行

"onReachBottomDistance": 150, //距离底部150上滑有效,注意，号

回到 list.vue页面，我们在 onload()事件的下面添加以下代码：

        ,onPullDownRefresh: function() {
			console.log("下拉");
			page = 1;
			this.noteList = [];
			this.goLink();
		},
		onReachBottom: function() {
			console.log("上拉");
			this.goLink();
		}

然后保存，运行看一下效果，如果代码正确，就会看到效果，可以事先多录几条内容。

我们现在从登陆开始 ，依次执行 写日记，看日记，会发现，写完日记跳到了看日记界面，再次点击写日记，发布日记后，虽然跳回了 看日记界面，但内容没有刷新 ，只有手工下拉刷新才能看到自己刚刚写内容，显示，我们希望是每次写完就能看到自己写的新日记，怎么解决这个问题呢？

还记得我们在 index.vue中，发布成功后写过一段代码：

uni.setStorageSync("pop", 1); //给刷新标记赋值

这时就要用到这个了。

找到 onload ,在它的前面加一段代码：

onShow() {
			let pop = uni.getStorageSync('pop') //取得刷新标记
			if (pop) {    //如果标记为1，就刷新页面
				page = 1;
				this.noteList = [];
				this.goLink();

			}
			uni.removeStorageSync('pop') //移除刷新标记
		},

这样就实现了写完后立即刷新。

这里用到了 onShow(),  它表示页面显示，执行的顺序晚于onload，onload是指页面第一次被显示时执行的功能，一般只执行一次，而 onShow，只要显示就执行，没有次数限制。

接下来，我们增加修改与删除操作的功能。
<text :data-id="item.id" :data-index="index" @tap="editOne">修改</text>
<text :data-id="item.id"     :data-index="index" @tap="removeOne">删除</text>

在HbuilderX中，@click与@tap都是点击时触发事件，不同的是：

1. @click是组件被点击时触发，会有约300ms的延迟；
2. @tap是手指触摸离开时触发，没有300ms的延迟，编译到小程序端，@click会被转换成@tap；

我们设置点击后，执行 removeOne方法，所以，在methods里，我们再增加这个方法

editOne: function(e) {
				var noteID = e.currentTarget.dataset.id;   //取得当前日记在数据库里的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"});
									}
								}
							});
						}
					},
				});
			}

在编辑功能 editOne中，我们的跳转用的是 uni.navigateTo,这个表示跳转到指页面，可以带点慰问品（参数）过去

下一节具体学习怎么编辑日记