vue刷新页面时保持当前分页不变(使用本地存储保存页码)

在使用vue开发在线购物系统时遇到问题
如图,在当前页面想点击’确认订单’按钮使商品状态改变为’备货完成’。测试时发现点击确认订单后,虽然按钮的状态会发生改变,但是页面会跳转到第一页,使得每次操作之后都要重新选择界面。
在这里插入图片描述
因此,需要实现在刷新页面时保持当前的分页页码不改变。
查看代码可知

created() {
    this.handleCurrentChange(1)
  }

原本的代码是在页面构造时直接传入第一页的页码使得页面去读取第一页应有的数据。

因此解决方法就是设置一个变量,用于保存每一次刷新前的页面页码数,页面构造函数里进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据。

在需要刷新前将当前页码保存,页面构造时如果这个变量不为空,那么页面读取这个变量并传入handleCurrentChange函数加载对应页码数的数据。

解决:如图,在this.reload()函数前,使用本地存储保存当前页码
在这里插入图片描述
在created里读取这个变量并与1比较。若为空那么传入的值为1,页面加载第一页数据,不为空则加载在刷新之前所储存的页码并读取数据。问题解决

created() {
    this.currentPage = localStorage.getItem("lastpage") || 1
    this.handleCurrentChange(this.currentPage )
  }
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue-seamless-scroll是一个用于实现无缝滚动效果的Vue组件库。要将vue-seamless-scroll设置为分页跳转,可以按照以下步骤进行操作: 1. 首先,确保你已经安装了vue-seamless-scroll组件库,并在你的Vue项目中引入了该组件。 2. 在你的Vue组件中,使用vue-seamless-scroll组件,并设置相应的属性和事件。 3. 设置分页跳转的关键是通过控制滚动的位置来实现。你可以使用vue-seamless-scroll提供的`scrollTo`方法来实现滚动到指定位置。 4. 在你的Vue组件中,定义一个变量来表示当前页码,例如`currentPage`。 5. 监听分页事件,当用户点击分页按钮,更新`currentPage`的值,并调用`scrollTo`方法将滚动位置设置为相应的页码位置。 下面是一个示例代码,演示如何将vue-seamless-scroll设置为分页跳转: ```vue <template> <div> <vue-seamless-scroll ref="scroll" :scroll-list="list" :scroll-options="options"></vue-seamless-scroll> <div> <button @click="goToPage(1)">第一页</button> <button @click="goToPage(2)">第二页</button> <button @click="goToPage(3)">第三页</button> </div> </div> </template> <script> import VueSeamlessScroll from 'vue-seamless-scroll'; export default { components: { VueSeamlessScroll }, data() { return { list: [1, 2, 3, 4, 5], // 假设有5页数据 options: { // 设置滚动的配置项 // ... }, currentPage: 1 // 当前页码,默认为第一页 }; }, methods: { goToPage(page) { this.currentPage = page; // 更新当前页码 const scrollInstance = this.$refs.scroll; // 获取vue-seamless-scroll实例 const scrollPosition = (page - 1) * scrollInstance.itemHeight; // 计算滚动位置 scrollInstance.scrollTo(scrollPosition); // 滚动到指定位置 } } }; </script> ``` 通过以上步骤,你可以将vue-seamless-scroll设置为分页跳转,并根据用户点击的分页按钮来实现滚动到相应的页码位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ThatDawn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值