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

前几天做的项目里有用到下拉刷新。使用了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',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式

import { Button, Cell } from 'vant';

如果你在使用 TypeScript,可以使用 ts-import-plugin 实现按需引入

方式二. 按需引入组件

在不使用插件的情况下,可以手动引入需要的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 导入所有组件(在main.js中引入)

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

注意:配置 babel-plugin-import 插件后将不允许导入所有组件

 引入成功后使用

        
            
            
        
        
        
暂无预约~

loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值),里面的v-bookOrder是自己写的组件。

初始化loading为false,finished为false。

一切ok。

但项目里,加载的list,页面上有个切换的tab,实现切换不同的类型,加载不同的list的功能。vant-ui的list就有个bug,当切换tab的时候,它的onload没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload就可以实现自动触发。(很多人给官方提这个问题,但是官方就是不修改)。

vant-ui框架的一个bug(切换后onload不触发)_第1张图片

下面给出解决方案。

在切换tab后执行初始化函数

initialization(){
            this.list = [];
            this.page = 1;
            this.loading = true;//下拉加载中
            this.finished = false;//下拉结束
            if(this.loading){
                this.onLoad();
            }
        },

list清空,page=1表示第一页,将loading设置为true,一定触发一次onload,

onLoad() {
            setTimeout(async () => {
                let res = await this.$ajax.get({
                    limit:this.pageSize,
                    page:this.page,
                    keyword:this.value1
                },'/order/businesslist/'+this.type,
                res=>{
                    if(res.code==0){
                        this.list = this.list.concat(res.data.list)
                        this.loading = false;
                        if(this.list.length >= res.data.total){
                            this.finished = true;
                        }
                        this.page++;
                    }
                else{
                    this.$dialog.toast({
                        mes: res.msg,
                        timeout: 1500
                    });
                }},err=>{
                    this.$dialog.toast({
                        mes: "出错了~",
                        timeout: 1500
                    });
                })       
            }, 500);
        },

在第一次onload的过程中将loading设置为false,则触发第二次loading,当执行到满足结束条件的时候,finished为true,结束加载。bug就解决啦

 

你可能感兴趣的:(JavaScript,vant-ui,bug,html,css)