步骤5:我的纸条页面逻辑处理

最近更新时间:2024-02-02 14:52:21

我的收藏
本文主要围绕我的纸条 history.js 进行讲解,更多详情请参见 我的纸条逻辑代码

操作步骤

1. data 数据的设计。
active: true, // 用来改变当前选中的样式
dataListPut: [], // 用来存put页面的数据
dataListOut: [],
schoolList: ["河南理工", "河南师范", "焦作师范"]

2. onload 生命周期的设计。
2.1 因为这个页面没有获取用户 openId 的功能,所以需要先判断下是否已经获取到了用户的 openId。如果没有,则直接跳到 index 页面获取 openId,并提示相应错误。
if(app.globalData.openId == ''){
wx.switchTab({
url: '/pages/index/index',
success: res => {
},
fail: err => {
wx.showToast({
title: err,
icon: 'error'
})
}
})
}

2.2 调用请求“我放入的纸条”的数据函数。
that.getPutData()

3. 通过小程序开放文档提供查询方式,用用户的 openId 来获取到数据,并且把获取到的数据,通过 that.setData 给到 dataListPut 供页面渲染。
查询方法
作用
limit
来限制获取数据的条数
orderBy
数据排序
// 获取数据put
getPutData: function(e){
const that = this
db.collection('body_girl_yun').where({
openId: app.globalData.openId
}).limit(10).orderBy('time', 'desc').get().then(res => {
console.log(res)
if(res.data.length == 0){
that.setData({
dataListPut: res.data
})
return wx.showToast({
title: '没有数据',
icon: 'none'
})
}
that.setData({
dataListPut: res.data
})
}).catch(err=>{
wx.showToast({
title: '加载数据失败',
icon: 'error'
})
})
},

4. 删除纸条的逻辑实现。
4.1 实现删除提示。
wx.showModal({
title: '提示',
// content: '确认删除纸条?',
content: '删除后友友大厅将不可见,确认?',
success (res) {

})

4.2 如果用户确认删除,用 remove 通过前端传过来的 _id,对应唯一一个数据,进行删除,包括基本的错误处理。否则提示取消删除。
if (res.confirm) {
db.collection("body_girl_yun").where({
_id: _id
}).remove().then(res => {
wx.hideLoading()
if(res.errMsg == 'collection.remove:ok'){
that.getPutData()
}else{
wx.showToast({
title: '删除失败',
icon: 'error',
mask: true
})
}
}).catch(
console.error
)
} else if (res.cancel) {
wx.showToast({
title: '删除取消',
icon: 'error',
mask: true
})
}
}

5. 进行分页查询结合上划触底加载数据。
5.1 通过 onReachBottom 触发事件。
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(this.data.active==true){
this.getPutDataBottom()
}else{
this.getOutDataBottom()
}
},

5.2 通过 skip(pagePut * 10).limit(10) 中的 pagePut 参数来记录页数。
5.3 通过 concat 进行新旧数据的拼接,并更新到页面。
// 上划触底的事件
getPutDataBottom: function(){
const that = this
let pagePut = that.data.pagePut + 1

db.collection('body_girl_yun').where({
openId: app.globalData.openId
}).skip(pagePut * 10).limit(10).orderBy('time', 'desc').get().then(res => {
console.log(res)
wx.hideLoading()
// 如果还有数据
if(res.data.length > 0){
// 通过concat进行数据的拼接
let all_data = that.data.dataListPut.concat(res.data)
that.setData({
dataListPut: all_data,
pagePut: pagePut
})
}else{
wx.hideLoading()
wx.showToast({
title: '没有更多数据',
icon: 'none'
})
}

})
},

6. 实现下拉刷新数据。
6.1 需要先在 app.json 文件里配置开启下拉刷新功能 enablePullDownRefresh。
"window": {
"backgroundColor": "#FFCCFF",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FFCCFF",
"navigationBarTitleText": "校园交U",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true
},

6.2 用户 onPullDownRefresh 下拉触发请求数据的函数,重新获取数据。
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
if(this.data.active == true){
this.getPutData("pull")
}else{
this.getOutData("pull")
}
},