vant 小程序踩坑之Toast

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vant 小程序踩坑之Toast相关的知识,希望对你有一定的参考价值。

参考技术A 官方给的路径是这样
import Toast from 'path/to/@vant/weapp/dist/toast/toast';

然后报错

修改后
import Toast from '@vant/weapp/toast/toast';
可以正常使用了

FlatList踩坑之onEndReached

最近在做一个RN项目,有使用到FlatList这样一个RN封装的组件去做上拉加载更多功能,在iOS和Android平台上,总结了以下几个遇到的问题及解决方案

1. 进入页面onReached开始就被触发

解决方案:

// 伪代码如下
<FlatList 
      ...  
     onEndReachedThreshold={0.5}
      ...
/>

当onEndReachedThreshold设置大于1时,的确进入页面就触发,设置在0-1之间时按正常逻辑走

2. 上啦加载更多onReached被触发两次,造成重复请求资源,性能浪费

解决方案:

<FlatList
    ...
    onEndReached={() => {
    if (this.canLoadMore) {
        this.loadData(true); //
        this.canLoadMore = false;
    }
    }}
    onEndReachedThreshold={0.5}
    onMomentumScrollBegin={() => {
    this.canLoadMore = true; //初始化时调用onEndReached的loadMore
    }}
    ...
/>

这是一个官方的问题,在github上我们可以查到有人提了这个issue,目前一个解决方案就是我们可以通过设置一个flag去控制这个问题,当第一次触发完毕之后,将这个flag设置为false,避免重复去执行我们需要做的action操作

3. 通常情况下是先调用onMomentumScrollBegin,然后调用onEndReached,但是可能会存在意外情况

解决方案:

<FlatList
    ...
    onEndReached={() => {
    setTimeout(() => {
        if (this.canLoadMore) {
            this.loadData(true);
            this.canLoadMore = false;
        }
    }, 100)
    }}
    onEndReachedThreshold={0.5}
    onMomentumScrollBegin={() => {
    this.canLoadMore = true; //初始化时调用onEndReached的loadMore
    }}
    ...
/>

以上是关于vant 小程序踩坑之Toast的主要内容,如果未能解决你的问题,请参考以下文章

Vant Weapp小程序蹲坑之使用toast组件

Vant-Weapp踩坑之van-tabs设置高度

微信小程序中使用vant组件库(超详细)

mpvue + Vant weapp + 微信云服务 打造小程序应用

小程序安装第三方组件库 如:vant

微信小程序 vant日历自定义文案