解决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 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 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
新浪新闻小偷
2006/10/09 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php实现mysql封装类示例
2014/05/07 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
浅析python中while循环和for循环
2019/11/19 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python logging设置level失败的解决方法
2020/02/19 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
前台接待岗位职责
2013/12/03 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
组工干部演讲稿
2014/09/02 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
Python合并pdf文件的工具
2021/07/01 Python