Vant组件当中van-list的使用在自定义列表当中

最新推荐文章于 2024-05-06 15:16:12 发布
最新推荐文章于 2024-05-06 15:16:12 发布
阅读量945 收藏
点赞数
分类专栏： vue HTML 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014582342/article/details/129179082
版权
HTML 同时被 2 个专栏收录
76 篇文章 2 订阅
订阅专栏
vue
39 篇文章 5 订阅
订阅专栏

起因

  • vant官网没有提及自定义列表当中的使用,并且只有一些简单的例子,这里记录下我使用vant-list的记录代码

需求和使用

  • 需求

    • 下拉滚动加载,当快要触底的时候,加载下一页数据(这里不考虑上拉刷新和搜索列表数据)

  • 使用

    • 给vant-list设置一个固定或者自适应flex:1的高度,并设置overflow:scroll即可正常使用

  • 演示地址和git地址

    • 演示:https://codesandbox.io/p/github/superBiuBiuMan/vant_list_study/main?file=%2FREADME.md
    • git:https://github.com/superBiuBiuMan/vant_list_study

  • 演示图

未成年梦想
关注
专栏目录
基于vant的van-picker实现自定义的四层区域组件的封装方法总结
cabinx的博客
10-24 1436
基于vant的van-picker实现自定义的四层区域组件的封装方法总结 1.业务需求： 最近在做一个vue的H5项目，由于项目的需求，需要在项目中使用后端管理系统维护的区域在H5上面进行渲染并选择，注意这里的区域总共有4层，并且通过组件需要返回4层区域的全部信息。 先展示一下最终的效果： 2.解决方案： 第一步：坑定是先找一个容器容纳这个组件，这里我们使用的vant的van-picker，HTML代码如下（其中：columns：表示组件数据，cancel：表示点击取消触发的函数，confirm：
vant中IndexBar 索引栏自定义索引列表
YHLQ的博客
12-23 2187
通过index-list属性自定义展示的索引字段 父组件：search.vue <template> <div> <searchHeader></searchHeader> <searchList :mCities="Cities"></searchList> </div> </template> <script> import sear
vant list列表组件分页场景使用 及 搜索框输入-请求数据-防抖处理
luoxiaonuan_hi的博客
05-25 2247
vant list列表组件分页场景使用 及 搜索框输入-请求数据-防抖处理
vant中list列表组件使用(附详细注释)
热门推荐
dujyong的博客
03-12 3万+
vant中list组件使用 html: <van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" ...
Vant4 List列表组件：资源中有项目合集案列
Fanbin168的专栏
11-14 2089
Vue项目：List组件的引入。则需要我们手动添加组件导入。
【VANT2】之List列表
一个美女的博客
12-10 2381
LIst列表——瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。常用于移动端项目
Vant---vant中list列表组件详解与使用
前端与计算机相关知识的分享，博主的qq523235674
02-14 9508
<template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="item in list" :key="item.id" :title="item.title" /> </van-list> </template> <sc.
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
11-21
最近由于公司项目需要，用vue写了几个简单的...就是list组件做上拉加载只有在第一个tab会触发，切换后触底不会再次触发 解决办法： 初始化定义了list的加载状态 tab切换时；重新初始化一次就行了 这样就解决了tab切换
vue vant Area组件使用详解
10-15
在 Vue Vant 中，`Area` 组件是一个用于选择省市区的组件，常用于地址选择等场景。这篇教程将详细介绍如何使用 `Area` 组件。 首先，由于官方提供的 `Area` 示例数据可能不全，我们需要引入自定义的 `areaList.js` ...
记录 vant-ui van-pull-refresh 的一些坑
m0_46165460的博客
02-04 1万+
坑 van-pull-refresh 里面要包含一个<div ref="fresh’> 在mounted里面设置一下高度 屏幕可视高度 - box距离顶部top，因为van-pull-refresh有个overflow:true属性，高度不够的时候下拉的时候会隐藏一些内容。 mounted () { this.freshHeight = document.document...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van-list :finished
vant自定义二级菜单操作
01-18
（1）组件解释： 本组件是为了解决二级联动的效果编写的，这里使用了省份和城市分开的效果，具体展示效果，可以参考下面。 （2）组件代码： <template> <div> <button @click=showM>{{ value || 选择省份 }}</button> <button @click=showC>{{ value2 || 选择城市 }}</button> <!-- 省份 --> <van v-model=showPicker position=bottom> <van-picker show-toolbar :colum
自定义vant中的样式
smx_123的博客
12-02 1825
定制vant组件样式
vant-ui中list列表组件的使用
m0_61418075的博客
04-12 1183
if (res.data.list === 0) { // 判断获取数据条数若等于0。res.data.list) // 将数据放入list中。:error.sync=“error” // 是否显示加载失败状态。error-text=“请求失败，点击重新加载” // 加载失败提示文案。:finished=“finished” // 是否已经加载完成。// 给数据条数赋值。finished-text=“没有更多了” // 加载完成提示文案。
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 680
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vant-List 列表-加载刷新-下拉刷新
weixin_45379180的博客
09-20 631
按文档进行，基本无误。
vant中list列表组件使用
weixin_55633731的博客
06-07 2922
<van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与底部距离offset时触发事件 offset="300" // 滚动条与底部距离offset时触发@load(默认.
vant使用van-list组件
yerimi的博客
11-02 1383
使用vant组件库实现列表的下拉刷新与上拉加载
vant2列表与动态表单
sunxinshu的博客
02-15 1654
【代码】vant2列表与动态表单。
van-address-list 如何自定义图标
最新发布
09-26
`van-address-list` 是 Vue 脚手架中一个用于地址选择的组件，它通常作为输入框旁边提供地点搜索功能。在 Vant UI 中，如果你想自定义这个列表项的图标，你需要通过 CSS 或者修改组件的样式来自行添加。 1. **CSS 自定义**： - 可以通过 `.van-address-item` 或者具体的类名如 `.van-address-item__icon` 来选中需要修改样式的元素。 ```css .van-address-item__icon { /* 这里可以设置你的图标样式，例如背景色、字体、大小等 */ background-image: url('path/to/your/icon.png'); width: 20px; height: 20px; } ``` 2. **Vue 配置**： 如果你想动态地改变每个列表项的图标，可以在 `van-address-list` 的选项中传入一个 `item-template`，然后在模板中插入图标。举个例子： ```html <van-address-list :item-template="customItemTemplate"> ... </van-address-list> <script> export default { data() { return { customItemTemplate: `<div><i class="your-icon-class"></i>{{ address }}</div>` }; }, }; </script> ``` 确保在 CSS 中已经定义了 `your-icon-class` 的样式。 记得在使用自定义图标之前，先确保你的图标路径正确，并且图标类名与 CSS 样式匹配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未成年梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值