vant-ui框架的一个bug（切换后onload不触发）

最新推荐文章于 2024-06-29 20:19:04 发布

赋予不予

最新推荐文章于 2024-06-29 20:19:04 发布

阅读量1.6w

点赞数 9

分类专栏： JavaScript vant-ui bug html css

本文链接：https://blog.csdn.net/qq_33276623/article/details/85678336

版权

本文主要讨论了在使用 vant-ui 的 List 列表组件时遇到的一个问题，即在切换Tab时onLoad事件不会自动触发。内容详细介绍了问题的背景，以及如何通过手动初始化列表，重置page和loading状态来解决这个bug。当列表已加载完毕再切换Tab，onLoad能正常工作，但官方尚未修复此问题。

摘要由CSDN通过智能技术生成

前几天做的项目里有用到下拉刷新。使用了vant-ui里的

List 列表

瀑布流滚动加载，用于控制长列表的展示

先说使用

1.用npm下载该模块包

npm i vant -S

2.引入组件

官方提供了三种方法。（我使用了第三种，全局引入方法）

方式一. 使用 babel-plugin-import (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

// .babelrc 中配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',