解决 van-list 列表请求完成后自动返回顶部的问题

出现原因:van-toast 会自动给body添加 .van-toast-unclickable,该class存在一个全局样式设置.van-toast--unclickable * { pointer-events: none } ,该样式导致了 van-list 高度丢失——为什么该样式会导致高度丢失目前不知,请教知道的大佬指点

重现方式:在body上添加 class=“van-toast–unclickable”,body下所有属性都会出现 .van-toast--unclickable * { pointer-events: none }

解决方案一:使用van-toast组件时,forbidClick设置为false

Toast.loading({
  duration: 0,
  message: "加载中...",
  forbidClick: false,
  loadingType: "spinner",
});

解决方案二: 设置全局css样式

  • 解决方案缺陷:van-toast 组件的forbidClick属性失效
.van-toast--unclickable * {
  pointer-events: auto !important;
}
.van-toast {
  &::before {
    content: "";
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    z-index: 9999;
  }
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 `van-list` 组件的 `scroll-to-top` 方法来实现加载完数据后回到顶部。具体做法是,在 `load` 事件中监听数据加载完成的回调函数,然后在回调函数中调用 `scroll-to-top` 方法。 示例代码如下: ```html <van-list v-model="list" :finished="finished" @load="onLoad"> <template #item="{ item }"> <van-cell :title="item.title" :label="item.label" /> </template> </van-list> ``` ```javascript export default { data() { return { list: [], finished: false } }, methods: { onLoad() { // 模拟异步加载数据 setTimeout(() => { this.list.push({ title: `Item ${this.list.length + 1}`, label: `Label ${this.list.length + 1}` }); // 数据全部加载完成后,设置 finished 属性为 true if (this.list.length >= 20) { this.finished = true; } // 加载完数据后回到顶部 this.$refs.list.scrollToTop(); }, 500); } } } ``` 在 `onLoad` 方法中,先模拟异步加载数据的过程,然后在数据全部加载完成后,设置 `finished` 属性为 `true`,表示数据已经全部加载完成。最后调用 `scrollToTop` 方法回到列表顶部,需要通过 `$refs` 来获取 `van-list` 组件的实例。 注意,如果是在 `v-for` 中使用 `van-list` 组件,则需要在 `van-list` 标签上添加 `ref` 属性来获取组件实例,示例代码如下: ```html <van-list v-model="list" :finished="finished" @load="onLoad" ref="list"> <template #item="{ item }"> <van-cell :title="item.title" :label="item.label" /> </template> </van-list> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值