解决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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php之Memcache学习笔记
2013/06/17 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
laravel model 两表联查示例
2019/10/24 PHP
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
美术教学感言
2014/02/22 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2014年店长工作总结
2014/11/17 职场文书
市场总监岗位职责
2015/02/11 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书