<van-cell-group>
<van-cell-group>
<van-field placeholder="请输入任务名称" value="{{title}}" bind:blur="titleBlur"/>
</van-cell-group>
<van-button plain type="info" block bindtap="addTodo">提交任务</van-button>
<block wx:for="{{todoList}}" wx:key="item">
<van-cell title="任务" value="{{item.title}}" />
</block>
</van-cell-group>
//以上是页面部分,下面是js部分
const db=wx.cloud.database();
const todoListCol = db.collection("todoList");
Page({
data: {
todoList:[],
title:"",
location:{},
page:0
},
titleBlur(e){
this.setData({ title: e.detail.value})
},
//添加数据到数据库
async addTodo(e){
let res = await todoListCol.add({
data:{
title: this.data.title,
location: this.data.location,
}
});
this.setData({ title: "",location:{} });
wx.showToast({
title: '添加成功'
})
await this.onPullDownRefresh();
},
choiceLocation(){
wx.chooseLocation({
success:res=>{
console.log(res)
this.setData({
location: res
})
}
})
},
//获取数据,使用skip方法,跳过一部分
async getList() {
let LIMIT=5;
let res = await todoListCol.limit(LIMIT).skip(this.data.page * LIMIT).get();
console.log("page:", this.data.page);
console.log("res:", res.data);
if(!res.data.length){
wx.showToast({
title: '没有更多数据了',
icon:"none"
})
return
}
this.setData({
todoList: [...this.data.todoList,...res.data],
page: ++this.data.page,
})
},
async onLoad(options) {
await this.getList();
},
//上拉触底加载,加载更多数据
onReachBottom(e){
this.getList()
},
//下拉刷新,更新数据库为最新
async onPullDownRefresh(){
this.setData({
todoList: [],
page: 0,
})
await this.getList();
wx.showToast({
title: '刷新成功'
})
wx.stopPullDownRefresh();
}
})
如果需要点击每一项,到详情页
需要给循环的每一项外面加一层
<navigator url="/pages/tododetail/tododetail?id={{item._id}}">
<van-cell title="任务" value="{{item.title}}" />
</navigator>
然后在详情页js里面接收数据
async onLoad(options) {
let { data} = await todoListCol.doc(options.id).get();
this.setData({
detail: data
})
}
网友评论