vant-list 一行两列时,最后一行与其他行间距不一致问题

原创已于 2023-03-03 21:44:42 修改 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #list #前端框架

于 2022-03-07 11:28:05 首次发布

1.使用vant-list时，会出现以下问题
watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2O6ICM5pyJ6K-G,size_9,color_FFFFFF,t_70,g_se,x_16

2. 如何解决
添加以下样式即可解决

/deep/.van-list__placeholder{

display:none;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

华而有识

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

10-15

本文针对VantUI的Tab切换时List组件不触发load事件的问题进行讨论，并提出了具体的解决方案。首先，问题的背景是这样的：在使用VantUI组件库时，开发人员可能会利用List组件的load事件来实现瀑布流式的滚动加载...

Vant-Aliapp：支付宝小程序版本Vant组件库

02-26

Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。预览 ...

参与评论您还未登录，请先登录后发表或查看评论

vant-list的应用（详细版本）

weixin_48871924的博客

10-19

1351

vant-list的应用

vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案

橙-极纪元-JJYCheng

01-31

7895

vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案

vant中field组件label属性两端对齐问题

热门推荐

Never1881412的博客

04-24

1万+

关于vant中label属性两端对齐问题的解决方案最近在开发一个移动端的Web应用，使用vant构建移动端的页面，在构建表单时，使用Field组件作为信息输入和展示，但是但是由于对于label属性只提供了left、center、right的对齐方式，个人觉得不是很美观，希望能够显示两端对齐的效果。 1、先看看原来的四种效果 label左对齐： label居中对齐 label右对齐 la...

gird布局解决最后一行数量不对布局问题

YhWyl527的博客

06-28

2718

一、justify-content对齐问题描述在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。如下代码： .container { display: flex; justify-content: space-between; flex-wrap: wrap; } .list { width: 24%; height: 100px; ba

vant中的list的基本操作

wanghuohuo1998的博客

08-08

1003

async onLoad () { // 1. 请求获取数据 const { data } = await getSearch({ page: this.page, // 页码 per_page: this.perPage, // 每页大小 q: this.q // 搜索关键字 }) // 2. 将数据添加到列表中 const { results } = data.data this..

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

01-22

List 列表瀑布流滚动加载，用于控制长列表的展示先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件官方提供了三种方法。（我使用了第三种，全局引入方法）方式一. 使用 babel-plugin-import (推荐) ...

vant 中van-list的用法说明

01-18

van-list里面的元素不能有float样式，否则会连续触发 load 事件原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...

html中使用vant的van-list列表懒加载

hy3528的博客

05-26

5772

使用van-list标签将需要进行懒加载的内容包住 <van-list class="activity" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div class="activity_cont" v-for="(item,index) in activitylist" :key="index">

ul和li实现分两列（多列）布局显示

09-25

DIV+CSS分两列（多列）布局显示，下面有个不错的示例，大家可以参考下

设置行间距

weixin_33834910的博客

03-30

435

设置行间距有四种方法分别是：（1）在布局文件中使用android：lineSpacingExtra 设置精准的行间距 使用android:lineSpacingMultiplier属性设置默认行间距的倍数（2）使用Style资源设置行间距，如果有多个控件需要设置行间距，使用Style会非常方便，也容易维护（3）使用setLineSpacing方法设置行间距 （4）在代码中设置行间距 ...

使用vant list实现订单列表，支持下拉加载更多

mfxcyh的博客

11-17

3317

在公司项目开发时，有一个需求是实现可以分页的订单列表，由于是移动端项目，所以最好的解决方法是做下拉加载更多。

vant--List列表使用

weixin_42645490的博客

01-11

6408

记录使用vant–list的下拉刷新以及分页功能 vant链接. 首先是分页，需要根据page,limit来获取数据，使用vant的代码做示范： <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >

vant步进器传值_Vant Layout 布局

weixin_39726697的博客

01-13

1214

Vant Layout 布局Layout 提供了van-row和van-col两个组件来进行行列布局引入importVuefrom'vue';import{Col,Row}from'vant';Vue.use(Col);Vue.use(Row);基本用法Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比此外，添加offset属性可以设置列的偏...

＜van-list＞＜/van-list＞列表组件的使用

weixin_49577940的博客

11-12

7756

<template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(item, index) in list" :key="index"> {{item}}} </van-cell> </van-list> </template> &l.

vant中list列表组件使用

weixin_55633731的博客

06-07

3171

<van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与底部距离offset时触发事件 offset="300" // 滚动条与底部距离offset时触发@load(默认.

使用vant 的List组件问题,List组件嵌套自己的列表组件，用来显示一个列表，通常情况是没问题的，但是当加上条件重新刷新组件的时候，会出现，重复的刷新两次，或者不刷新的问题，或者只显示一页

qq_38389533的博客

04-02

429

使用vant 的List组件问题

两列布局的多种方式

QD的博客

03-26

8147

面试的时候真的太常被面到这个问题了！所以还是实践一下做个笔记吧。 HTML布局如下：<body> <div class="content"> <div class="left"> <p>Hello</p> <p>I'am left</p> </div> <div class="right">

vant-popup里使用vant-list 数据较少时，第二次打开弹框，会多次触发onload事件