解决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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
JS制作简单的三级联动
Mar 18 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
浅析Vue 生命周期
Jun 21 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP技术开发技巧分享
2010/03/23 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python回调函数中使用多线程的方法
2017/12/25 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
实习自我鉴定
2013/12/15 职场文书
党组织公开承诺书
2014/03/29 职场文书
委托书的格式
2014/08/01 职场文书
承诺保证书格式
2015/02/28 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python