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

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时踩过的坑(下拉刷新、上拉加载等)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • 使用Vant完成通知栏Notify的提示操作

    效果: 代码展示: <template> <!-- 通知消息提示 --> <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div> </template> <script> export de

  • 解决vant的Toast组件时提示not defined的问题

    按照官方文档引入全局Toast组件,在methods里面定义函数执行函数时产生了报错: //定义的函数 handleClick(){ Toast('点击提示') } 报错信息 [Vue warn]: Error in v-on handler: "ReferenceError: Toast is not defined" 解决方法: handleClick(){ this.$toast('点击提示') } 补充知识:vue+vant移动端遇到的那些问题 1.项目引用了lib-flexi

  • vant-ui框架的一个bug(解决切换后onload不触发)

    前几天做的项目里有用到下拉刷新.使用了vant-ui里的 List 列表 瀑布流滚动加载,用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法.(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import(推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 np

  • Vant 在vue-cli 4.x中按需加载操作

    在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant&q

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

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多

    android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多

    本文实例为大家分享了Android实现ListView下拉刷新上拉加载更多的具体代码,供大家参考,具体内容如下 其实谷歌官方目前已经推出ListView下拉刷新框架SwipeRefreshLayout,想了解的朋友可以点击 android使用SwipeRefreshLayout实现ListView下拉刷新上拉加载了解一下: 大家不难发现当你使用SwipeRefreshLayout下拉的时候布局文件不会跟着手势往下滑,而且想要更改这个缺陷好像非常不容易. 虽然SwipeRefreshLayout非

  • Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

    之前用vue2的时候,写过vue2的用法,文末扩展知识点击查看,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说 组件通过 loading 和 finished 这俩变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true.此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可.若数据已全部加载完毕,则直接将 finished 设置成 true 即可. 但是我打印了一下,在调用方

  • BootStrap下的弹出框加载select2框架失败的解决方法

    bootstrap下的弹出框加载select2框架失败的解决方案如下所示: $("#modal").on("shown.bs.modal", function(){ //等待弹出框弹出后再渲染select2控件 $("#select2").select2({ //再次渲染父界面后才能够加载出来数据. dropdownParent:$("#mpu_chart"), placeholder: '请选择变量', data:mpuKe

  • 使用MUI框架模拟手机端的下拉刷新和上拉加载功能

    mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET.POST请求方式,支持返回json.xml.html.text.script数据类型: 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get().mui.getJSON().mui.post()三个方法. 套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框

  • 关于layui的下拉搜索框异步加载数据的解决方法

    思路分析:当我使用layui默认的下拉搜索框的时候,layui会默认渲染出一个HTML结构,所以我把渲染出来的这个结果直接给复制出来,这样css的样式就不用从头到尾写一遍了, 前端代码(我用的是jsp): <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC &quo

  • 解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了

    1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) 另外把 STATIC_ROOT = os.path.join(BASE_DIR, 'static') 改为 STATIC_ROOT = os.path.join(BASE_DIR, 'static1') 即这里面的s

  • PyTorch 多GPU下模型的保存与加载(踩坑笔记)

    这几天在一机多卡的环境下,用pytorch训练模型,遇到很多问题.现总结一个实用的做实验方式: 多GPU下训练,创建模型代码通常如下: os.environ['CUDA_VISIBLE_DEVICES'] = args.cuda model = MyModel(args) if torch.cuda.is_available() and args.use_gpu: model = torch.nn.DataParallel(model).cuda() 官方建议的模型保存方式,只保存参数: tor

  • H5基于iScroll实现下拉刷新和上拉加载更多

    H5基于iScroll实现下拉刷新和上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时

随机推荐