美文网首页
tudolist完整的添加,列表渲染,上拉加载,下拉刷新,封装写

tudolist完整的添加,列表渲染,上拉加载,下拉刷新,封装写

作者: 随风飞2019 | 来源:发表于2020-03-12 15:07 被阅读0次

<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
    })
  }

相关文章

网友评论

      本文标题:tudolist完整的添加,列表渲染,上拉加载,下拉刷新,封装写

      本文链接:https://www.haomeiwen.com/subject/iatpjhtx.html