解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)


Posted in Javascript onNovember 11, 2020

1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动

说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动;这现象并不是ios和安卓兼容性问题!

原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动。

2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题

问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新

原因:滑动的区间设置错了,此时滑动的区间应是此组件的父盒子,我将overflow:scroll设置给了最外层盒子

问题2. 上拉加载时展示的列表始终只包含当前某一页,而不是当前页和加载出的那一页

原因:请求接口的参数不应该是current++,也就是不应该是当前页数+1,而是始终保持当前页数,请求的size=current*size

问题3. 下拉时,当数据很少的情况下,页面的最下面部分被遮住

原因:给van-list设置了height,且height: 80%,van-list必须设置高,否则无法滑动

解决办法:设置最小高:min-height: calc(100vh - 100px); overflow: hidden;

问题4.上拉加载时出现重复加载问题

van-list的属性finished触发时间错误,如果直接放在@load方法中,则会出现一直请求加载

解决办法:将finished=true放在请求接口返回数据的方法里,当当前页面数据大于等于返回的总条数,finished=true,显示加载完成,不再触发load加载事件。

注:附上下拉刷新、上拉加载部分的代码

<template>
<van-pull-refresh v-model="isLoading" :head-height="20" @refresh="onRefresh">
  <van-list
  v-model="loading"
  :finished="finished"
  :offset="1"
  :immediate-check="false"
  :error.sync="error"
  finished-text="已全部加载完成"
  error-text="请求失败,点击重新加载"
  @load="onLoadList"
  >
  </van-list>
</van-pull-refresh>
</template>
<script>
data(){
 return {
 isLoading: false,
 finished: false,
 loading: false,
 }
},
methods:{
 getVideoList() {
  getVideoList(this.current, this.selectDisposeStatus,  this.searchValue).then(resp => {
  this.videoList = resp.data.records
  this.isVideoList = false
  if (this.videoList.length >= resp.data.total) {
   this.finished = true
  }
  }).catch(() => {
  this.error = true
  })
 },
 onRefresh() {
  this.current = 1
  this.getVideoList()
  this.isLoading = false
  this.$toast('刷新成功')
 },
 onLoadList() {
  this.current++
  this.loading = false
  this.getVideoList()
  this.$toast('加载成功')
 },
} 
</script>

补充知识:Vant与Element-ui出现Property '$notify' must be of type 'ElNotification'错误

遇到问题:

ERROR in /Users/oyo/projects/dataplatform/coconut/node_modules/vant/types/notify.d.ts 33:5 Subsequent property declarations must have the same type. Property ‘$notify' must be of type ‘ElNotification', but here has type ‘Notify'.

原因是两个组件库都在应用上添加了 $notify 方法;

解决方法是:只安装一个组件库, 另一个组件库按需引入

报错示例:

npm install vant element-ui

vant 和 element-ui 都有 $notify 方法, 会报错

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Vant);
Vue.use(ElementUI);

解决方案:

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

// 按需引入你用到的组件, 而不是安装整个组件库
import ElButton from 'element-ui/lib/button';
import 'element-ui/lib/theme-chalk/button.css';

Vue.use(Vant);
Vue.component('el-button', ElButton);
tsconfig.json
{
 "compilerOptions": {
 "paths": {
  // 指向正确的声明映射
  "element-ui/lib/button": ["node_modules/element-ui/types/button"]
 }
 }
}

以上这篇解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
JS前端基于canvas给图片添加水印
Nov 11 #Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 #Javascript
使用Vant完成Dialog弹框案例
Nov 11 #Javascript
vue实现lodop打印功能的示例
Nov 11 #Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 #Javascript
vue mvvm数据响应实现
Nov 11 #Javascript
Js数组扁平化实现方法代码总汇
Nov 11 #Javascript
You might like
php操作mysql数据库的基本类代码
2014/02/25 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
layui table 参数设置方法
2018/08/14 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Python 如何对文件目录操作
2020/07/10 Python
高三地理教学反思
2014/01/11 职场文书
总账会计岗位职责
2014/03/13 职场文书
调研座谈会发言材料
2014/08/23 职场文书
学习十八大的心得体会
2014/09/12 职场文书
物业工程部岗位职责
2015/02/11 职场文书
任长霞观后感
2015/06/16 职场文书
公司庆典主持词
2015/07/04 职场文书
会议室使用管理制度
2015/08/06 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python