收藏
回答

使用setData进行页面列表数据渲染,每次使用setData更新数据列表回滚至顶部,求解决办法?

需求是删除订单列表得某个订单,不管删除哪条订单,页面都会立马回弹至顶部,想要的效果是删除这条订单时页面定位在原地,感觉是setData得原因,请问是否有更好得解决方案

data: {
    orderstate: 0,
    orderCaching: [
      { id: 0, tabs: '全部', list: [], page: 1, isloaded: true },
      { id: 1, tabs: '待付款', list: [], page: 1, isloaded: true },
      { id: 2, tabs: '待发货', list: [], page: 1, isloaded: true },
      { id: 3, tabs: '待收货', list: [], page: 1, isloaded: true },
      { id: 4, tabs: '已完成', list: [], page: 1, isloaded: true },
    ],
    bottomload: false,
},

comfireRemove() {   // 删除请求
    app.request("order/order_delete", { order_id: this.data.removeid }).then(res=>{
      if (res.status == "success") {
        let orderCached = this.data.orderCaching, resindex = this.data.removeindex
        orderCached[this.data.orderstate].list.splice(resindex, 1)
        this.setData({ orderCaching: orderCached })   // 此处进行列表数据更新
        wx.showToast({
          title: '删除成功!',
          icon: 'success',
          duration: 2000
        })
      } else {
        wx.showToast({
          title: '删除失败!',
          icon: '/img/error.png',
          duration: 2000
        })
      }
    })
},

请问对此是否有更好得交互逻辑

最后一次编辑于  1天前
回答关注问题邀请回答
收藏

4 个回答

  • 黯伢
    黯伢
    03-16

    注意看,你的不同项的列表值被放到了orderCaching的不同项中,所以要单独对单个列表setData,只需改一句即可。

    this.setData({ orderCaching: orderCached })
    
    改成
    
    this.setData({ ['orderCaching[' + this.data.orderstate + '].list']: orderCached[this.data.orderstate].list })
    
    03-16
    赞同 1
    回复 2
    • Nicholas Fanta
      Nicholas Fanta
      03-16
      解决了,谢谢^_^
      03-16
      回复
    • 声烦
      声烦
      16小时前
      sendList: [], 我是直接这样的,每次切换时重新拿接口的值赋上,然后还有上拉加载的处理
      16小时前
      回复
  • 声烦
    声烦
    17小时前

    你好,如果是切换的时候用的是同一个数组呢,有办法让点击的时候更新数组 不让页面回到顶部吗?

    17小时前
    赞同
    回复 2
    • Nicholas Fanta
      Nicholas Fanta
      17小时前
      你使用二楼作者所提供的方法,页面是不会回到顶部的
      17小时前
      回复
    • Nicholas Fanta
      Nicholas Fanta
      17小时前
      使用的就是一个数组
      17小时前
      回复
  • 子不语
    子不语
    03-16

    你好,请提供能复现问题的简单代码片段

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    --↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)

    03-16
    赞同
    回复 2
    • Nicholas Fanta
      Nicholas Fanta
      03-16
      一楼已解决,谢谢^_^
      03-16
      回复
    • 子不语
      子不语
      03-17回复Nicholas Fanta
      OK

      --↓↓👍如果觉得有帮助的话请点个【赞】吧(唏嘘也有小尾巴了,可惜是假的)

      03-17
      回复
  • 亮子🌞
    亮子🌞
    03-16

    你是要回滚至顶部么 方法很多如果你用的不是scroll-view那么使用wx.pageScrollTo这个方法 如果是scroll-view使用scroll-top这个属性 或者scroll-into-view

    03-16
    赞同
    回复 1
    • Nicholas Fanta
      Nicholas Fanta
      03-16
      我更新了问题,不是要回滚至顶部,就是不想要回滚至顶部😂
      03-16
      回复
登录 后发表内容
问题标签