使用setData进行页面列表数据渲染,每次使用setData更新数据列表回滚至顶部,求解决办法?
发布于 6 年前 作者 baili 5668 次浏览 最后一次编辑是 5 年前 来自 官方Issues

需求是删除订单列表得某个订单,不管删除哪条订单,页面都会立马回弹至顶部,想要的效果是删除这条订单时页面定位在原地,感觉是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
        })
      }
    })
},

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

3 回复

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

this.setData({ orderCaching: orderCached })

改成

this.setData({ ['orderCaching[' + this.data.orderstate + '].list']: orderCached[this.data.orderstate].list })

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

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

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

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

回到顶部