首页 > 其他分享 >vant list组件使用

vant list组件使用

时间:2024-04-29 17:14:49浏览次数:26  
标签:loading vant list finished 定高 组件 overflow

   

<div class="list-wrapper unique-container">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
class="list"
@load="onLoad"
>
<hdbm-item
v-for="item in list"
:key="item.id"
></hdbm-item>
</van-list>
</div>

//设置定高,且溢处隐藏,y轴滚动,才能出发下拉更多机制(特别使用页面内设滚动区域)
.list-wrapper {
flex: 1;//定高
overflow: hidden;
overflow-y: auto;
}

 

标签:loading,vant,list,finished,定高,组件,overflow
From: https://www.cnblogs.com/qieting/p/18166273

相关文章

  • vue:子组件从后台获取数据期间,父组件被遮罩覆盖
    效果:父组件代码<template><el-containerv-loading="loading"class="container"element-loading-background="rgba(1,35,54,0.8)"><h1>这是父组件</h1><HelloWorldmsg="Welcometo......
  • (2)对组件进行修饰
    1、组件都默认放在View里2、上一节的实例代码包含了2个组件:Image、Text,如果要添加新一个Text组件,如下:importSwiftUIstructContentView:View{varbody:someView{Text("TurtleRock").font(.title).foregroundColor(.green)......
  • vite 项目,背景图报错 The request url "xx/xx/xx.xx" is outside of Vite serving all
    版本vite3.2.6vue3.2.37 背景本地启项目,项目中引用了自研组件库(没有安装,通过文件路径直接引用,便于调试项目和组件),两者文件夹是平级的组件库中背景图:background:100%/100%no-repeaturl('../assets/svg/xxx.svg'); 问题本地启动项目之后,背景图未正常展示浏览器控......
  • Daily checklist
    异常流量检查httpRequest.latency>1并检查httpRequest.requestUrl分布 httpRequest.status>200httpRequest.status=0并检查httpRequest.status状态分布如果发现异常流量高峰请检查httpRequest.userAgent的分布 ......
  • 界面组件DevExpress Blazor UI v23.2 - 网格、工具栏功能全新升级
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。DevExpress Blazor控件目前已经升级到v23.2版本了,此版本进一步增强了可访问......
  • IPC-7711/21D, IPC-7711D, IPC-7721D 电子组件的返工、修改和维修,验收标准。Rework,
    IPC-7711/21-RevisionD-StandardOnly:Rework,ModificationandRepairofElectronicAssembliesTheIPC-7711/21guideprovidesproceduresforrework,repairandmodificationofprintedboardassemblies,includingtoolsandmaterials,commonprocedures,......
  • 父子组件通信
    prop最常见的组件通信方式之一,由父组件传递到子组件event最常见的组件通信方式之一,当子组件发生了某些事,可以通过event通知父组件style和class父组件可以向子组件传递style和class,它们会合并到子组件的根元素中示例父组件<template><divid="app"><HelloWorld......
  • Angular cli 组件和服务的创建, 父传子,子传父,服务的简单使用
    1:Angularcli创建组件componentnggcomponentcomponents\rightnggcwave简写需要定位到根路径下即可创建组件CouldnotfindanNgModule.Usetheskip-importoptiontoskipimportinginNgModule.PSC:\myAngulrDemos\20240428demo\mydemo01\src>cd..PSC......
  • 组件的使用、父子通信、ref属性(父子通信)、动态组件、 keep-alive、插槽
    【组件的使用】1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</title>6<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&......
  • 图文解说ChinaCock日期组件CCDateTimePicker(二)
    上文,介绍了CCDateTimePicker基本用法,实现日期、时间等各种日期格式的输入,用法简单,代码简洁。能不能用这个控件,来实现自定义的输入格式呢?答案是能。比如:我的需要求就遇到这样的情况,用户要选择星期几的方式,如下图,是已经实现的结果: 接下来看看如何实现的?第一步,先定义一个数组: ......