文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序赖加载刷新数据页面数据堆叠问题debug

2023-09-15 12:00

关注

 

目录

项目所需

原生写赖加载存在的bug

解决问题思路及代码实现

思路:

代码实现:

列表.wxml

 列表.js

Wenjain_shanchu.js

Wenjain_shanchu.json

Wenjain_shanchu.wxml

shouye.js

 ⭐️ 好书推荐

【内容简介】 


项目所需

某高校大一新生入学,学校的综合服务站小程序上传文件的列表支撑前端页面支撑不了成千上万条的渲染。

所以,决定将直接列表加载换成赖加载。

原生写赖加载存在的bug

使用原生来创建一个赖加载是不错的选择,但是遇到了一个问题,就是小程序的onshow和onload生命周期钩子,无论使用哪一个钩子都会存在数据刷新之后数据堆叠的问题。

解决问题思路及代码实现

思路:

我们使用懒加载时,一般会套用者数据的增删改查一起使用,比如:使用赖加载列数据之后,想实现每一条数据的删除之后刷新数据,这个时候就不能够使用正常的onshow或者onload生命钩子实现。

我们这时候要使用列表页面点击删除时跳到二级页面实现删除数据的同时,在二级页面使用getCurrentPages()函数获取到小程序页面栈,然后通过pages.length来获取上一个页面的实力对象,在通过beforePage方法修改上一个页面的数据,并结合着beforePage方法调用上一个页面的自定义方法,在使用正常的wx.navigateBack返回上一个父级页面并携带一个自定义的参数,这时候需要在父级页面上创建对话框事件,实现返回到此父级页面的上一个页面,然后再从此父级页面的上一个页面的onload生命钩子函数中做判断,如果孙页面的参数存在且判断正确,则自动执行跳到列表页面,从而解决赖加载结合数据的增删改查之后的数据在列表页面的堆叠问题!

代码实现:

列表.wxml

赖加载时候的数据删除

这里的item里面的_id是js中赖加载完成的数据列表

删除

 列表.js

  onShow() {    if (this.data.txt == 1) {      wx.showModal({        title: '删除成功!',        content: '是否自动重新进入此页面完成刷新!',        success(res) {          if (res.confirm) {            console.log('用户点击确定')            wx.reLaunch({              url: '../shouye/shouye?wenjian='+'yonghu',            })          } else if (res.cancel) {            console.log('用户点击取消')          }        }      })    }  },

Wenjain_shanchu.js

  Queding(){    let that = this    wx.cloud.database().collection('wenjian').doc(that.options.Wenjain_shanchu_id).remove({        success(res){            console.log(res)            wx.showToast({              title: '删除成功!',            })            let pages = getCurrentPages();   //获取小程序页面栈            let beforePage = pages[pages.length -2];  //获取上个页面的实例对象            beforePage.setData({      //直接修改上个页面的数据(可通过这种方式直接传递参数)              txt:1            })            beforePage.go_update();   //触发上个页面自定义的go_update方法            wx.navigateBack({         //返回上一页                delta:1            })        }    })  },  onLoad(options) {    console.log(options.Wenjain_shanchu_id)    Dialog.confirm({      title: "再次确定您是否要删除",      message:'\n\n',      customStyle:'width:500rpx;border-radius: 20rpx;padding:20px;display: flex;flex-direction: column;font-size:20px',      // theme:'round-button',     }).then(() => {      // on close     });      },

Wenjain_shanchu.json

{  "usingComponents": {    "van-dialog": "@vant/weapp/dialog/index"  }}

Wenjain_shanchu.wxml

shouye.js

  onLoad(options) {    console.log(options,'111')    if(options.wenjian == 'yonghu'){      wx.navigateTo({        url: '../My_wenjain/My_wenjain',      })    }  },

 ⭐️ 好书推荐

清华社【秋日阅读企划】领券立享优惠

IT好书 5折叠加10元 无门槛优惠券:https://u.jd.com/Yqsd9wj

活动时间:9月4日-9月17日,先到先得,快快来抢

【内容简介】 

 《Vue.js从入门到精通》从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用Vue.js进行程序开发需要掌握的各方面技术。全书分为4篇,共19章,内容包括初识Vue.js、ECMAScript 6语法介绍、Vue实例与数据绑定、条件判断指令、v-for指令、计算属性和监听属性、元素样式绑定、事件处理、表单元素绑定、自定义指令、组件、组合API、过渡和动画效果、渲染函数、使用Vue Router实现路由、使用axios实现Ajax请求、Vue CLI、状态管理,以及51购商城项目实战。书中的大多数知识点都结合具体实例进行介绍,涉及的程序代码给出了详细的注释,使读者可轻松领会Vue.js程序开发的精髓,快速提高开发技能。

📚 京东购买链接:https://item.jd.com/14055952.html

来源地址:https://blog.csdn.net/lbcyllqj/article/details/132847382

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯