vue+vant-ui List使用问题（02）

最新推荐文章于 2024-06-28 07:30:00 发布
最新推荐文章于 2024-06-28 07:30:00 发布
阅读量446 收藏
点赞数
分类专栏： vant 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcy19971113/article/details/111559418
版权

移动端项目 vue+vant-ui List 使用 【小坑】

van-pull-refresh+list

今天用vue+vant项目做优化数据工作，使用了van-pull-refresh+list做上拉加载+下拉刷新
本来高高兴兴，结果发现鼠标滚轮已滚动就触发list组件的onload（）方法，而且还再次获取的第一页数据，通过小半下午的折腾发现问题不是在 js方法上！居然在css样式上

+在这里插入图片描述
就是如此，修改列表的< li >的高度解决这个问题。
糟心的事情总会莫名其妙的发生

优雅的二胖
关注
专栏目录
card如何添加复选框 vant_vue+vant-UI框架实现购物车的复选框全选和反选功能
weixin_29002935的博客
02-15 862
购物车页面的设计图商品的列表代码：v-for="(item,index) in shoppingListData.rows":key="index">:value="item.goods_id"v-model="item.isChecked"checked-color="#07c160"@click="chooseChange(item.goods_id)">:src="item.go...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van-list :finished
vue vant-list 组件使用记录
qq_38388578的博客
10-16 595
html <template> <div class="integral_list"> <van-nav-bar title="积分明细" left-text="返回" left-arrow @click-left="goBack" /> <div class="list_content"> <van-list v-if="list.length>0" :immediate-ch.
vant ui使用
weixin_68160847的博客
01-29 2698
自动按需引入组件方式 需要我们在项目中下载一个babel插件, 简单配置一下,它会在编译过程中将import的写法自动转换为按需引入的方式,不然可能就需要我们手动的引入样式和组件
vue解决长列表方法，ui复用组件用法
武童乐的博客
11-29 587
重复ui占用浏览器资源
vant-ui van-list使用方式
超级婷
01-25 812
vant-ui list使用方式
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
本文档将会介绍如何使用Vue.js结合Vant-UI组件库来实现这一功能。 #### 2. Vant-UI和Vue.js简介 **Vue.js** 是一个构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅...
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin...
vue+vant使用图片预览功能ImagePreview的问题解决
11-20
如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：    着实让员外...
Vue：无限滚动-通过vant组件
热门推荐
qq_36413371的博客
08-09 1万+
在vant中通过list组件，实现评论列表的无限滚动 按需引入组件 //可以看 vant官网 方法一： src目录下新建 .babelrc 文件，内容如下 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true......
vant实现下拉刷新和上拉加载_关于Vant-list 上拉加载以及下拉刷新问题
weixin_39532352的博客
12-20 378
关于Vant-list 上拉加载以及下拉刷新问题第一步引入import { Notify, Dialog, Image, List, PullRefresh } from 'vant'import Vue from 'vue'Vue.use(Image).use(List).use(PullRefresh)第二步第三步data () {return {productList: [], //异步查询...
vue3 van-list van-pull-refresh实现上拉加载，下拉刷新
@必意玲
04-12 3315
用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。用该组件可实现上拉加载。两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将。事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将。此时可以发起异步操作并更新数据，数据更新完毕后，将。若数据已全部加载完毕，则直接将。// 如果返回数据为空，表示已加载完成。
vue3.0 + vant实现下拉刷新上拉加载
最新发布
chengcheng9876的博客
06-28 1473
vue3.0 + vant实现下拉刷新上拉加载 @load事件不生效，在滚动的过程中，onLoad事件没有任何反应
vue学习笔记：使用vant的list和PullRefresh组件实现上拉刷新和下拉加载
杨威的博客
05-11 2067
先看效果： 再上代码 <template> <div class="pageRoot"> <van-nav-bar title="威哥头条" fixed /> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" .
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新
nanfang_yinan的博客
02-22 6348
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新，导致bug【没划到顶部触发刷新使得页面顶部的部分在刷新后消失了】 解决办法： 第一步：在需要刷新的div设置class <van-pull-refresh v-model="isLoading" :disabled="isRefresh" :head-height="140" @refresh="onRefresh"> <div class="xun-geng-scroll" 第二步
前端Js常见的List函数集合
小心——博客
05-30 6755
前端Js常见的数组函数集合
vant-ui中list列表组件的使用
m0_61418075的博客
04-12 1131
if (res.data.list === 0) { // 判断获取数据条数若等于0。res.data.list) // 将数据放入list中。:error.sync=“error” // 是否显示加载失败状态。error-text=“请求失败，点击重新加载” // 加载失败提示文案。:finished=“finished” // 是否已经加载完成。// 给数据条数赋值。finished-text=“没有更多了” // 加载完成提示文案。
vant 使用PullRefresh 下拉刷新组件时，无论滚动条在哪，总会触发下拉滚动
u010613970的博客
11-07 3267
今天遇到个问题，使用PullRefresh组件时，无论滚动条滚动到哪里，只要页面向下拉，页面的滚动条都还没到顶就触发下拉刷新 在网上找了一下，可终于找到方法了 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; } .van-list { height: auto !important; } 这样就可以实现解决问题了 ...
vant-list上拉加载onload事件触发多次
weixin_45121510的博客
10-14 1万+
场景：3个tab页签切换时，调用不同接口，在某一个tab只要翻页到>=2的情况，当它再点击到另一个tab的时候，另外一个tab就会连续调用两次查询接口
Vue公共列表选择组件实现及Vant-UI样式引用
"Vue公共列表选择组件通过引用Vant-UI库来实现高效且美观的样式设计。组件具有多项功能，如动态与静态数据源的支持、分页加载、模糊搜索以及单选和多选模式。" 在Vue.js开发中，构建可重用的组件能够提高代码的复用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值