van-list方法如何正确的在vant中使用

　　介绍

van-list方法如何正确的在vant中使用?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

van-list里面的元素不能有样浮动式,否则会连续触发负载事件

<强>原代码

& lt; template> 　　& lt; div类=癮bout"祝辞　　& lt; van-tabs v模型=癮ctive"粘性@change=癵etTypeDate"比; 　　& lt; van-tab v=皌ypeList"(选项卡);:title=皌ab.name":关键=皌ab.id"比; 　　& lt; div:类=皃ic-content"祝辞　　& lt; van-list 　　:完成=癴inished" 　　:完成的文本=癴inishedText" 　　v模型=發oading" 　　:抵消=?0“; 　　:immediate-check=癴alse" 　　@load=癵etserviceList" 　　比; 　　& lt; !- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -修改前代码- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -→/* & lt; div 　　类=皃ic-box" 　　v代表=皊erviceList"(服务); 　　:关键=皊erve.id" 　　@click=奥酚善?服务)“; 　　比; 　　& lt; div类=皃ic-item"祝辞　　& lt; img 　　v=皊erve.picturePath" 　　美元:src=https://www.yisu.com/zixun/盉ASE_PICTUREPATH_URL + serve.picturePath.split (" ") [0]”> 　　

　　{{serve.name}}

　　

{serve.price}}

　　

*/ 　　　　

　　　　　　

　　 & lt; script> 　　进口{标签、标签、列表、细胞、行坳}从“vant"; 　　从“进口{FetchServeType, FetchServeList} . ./api/serve.js"; 　　　　出口默认{ 　　数据(){ 　　返回{ 　　活动:0, 　　typeList: [], 　　serviceList: [], 　　类型:““, 　　finishedText:““, 　　完成:假的, 　　pageNum: 1、　　页大小:10, 　　contentHeight: 0, 　　加载:假　　}；　　}, 　　安装(){ 　　this.getOrderStyle (); 　　这一点。contentHeight=document.documentElement。clientHeight - 66 - 40 +“px"; 　　}, 　　方法:{ 　　异步getOrderStyle () { 　　让res=等待FetchServeType (); 　　如果(res.data,,res.data.success) { 　　这一点。typeList=res.data.data; 　　这一点。类型=res.data.data [0] . name; 　　this.getTypeDate (); 　　} 　　}, 　　getTypeDate () { 　　这一点。pageNum=1; 　　这一点。类型=this.typeList [this.active] . name; 　　这一点。serviceList=[]; 　　这一点。finishedText=?“; 　　这一点。完成=false; 　　this.getserviceList (); 　　}, 　　异步getserviceList () { 　　让面包=? toast.loading ({ 　　面具:没错, 　　信息:“加载中…“ 　　})；　　const{类型、pageNum页大小}=; 　　让params={ 　　类型, 　　pageNum, 　　页大小　　}；　　让res=等待FetchServeList (params); 　　这一点。加载=false; 　　toast.close (); 　　如果(res.data,,res.data.success) { 　　让=(res.data列表。数据,和res.data.data.list) | | []; 　　如果(pageNum比;1){ 　　这一点。serviceList=[…]。serviceList……列表); 　　其他}{ 　　这一点。serviceList=列表; 　　}//如果当前页数=总页数,则已经没有数据　　如果(res.data.data。pageNum===res.data.data.pages) { 　　这一点。完成=true; 　　这一点。finishedText=?没有更多了产生绯闻;; 　　}//如果总页数大于当前页码,页码+ 1 　　如果(res.data.data。页面比;pageNum) { 　　this.pageNum + +; 　　} 　　} 　　console.log (“FetchServeList:“this.serviceList); 　　} 　　} 　　}；　　& lt;/script> & lt;风格lang=皊css"scoped> 　　.pic-content { 　　overflow-y:滚动; 　　-webkit-overflow-scrolling:触摸; 　　.pic-box {/* * * * * * * * * * * * * * * * * * * * * * * * * * * *修改前代码* * * * * * * * * * * * * * * * * * * * * * * * * * */background - color: # fff; 　　溢出:隐藏; 　　break-inside:避免; 　　box-sizing: border-box; 　　margin-bottom: 0.7快速眼动; 　　填充:0.8快速眼动; 　　宽度:48%; 　　高度:16眼动; 　　~ ~浮动:左;~ ~/* * * * * * * * * * * * * *不能有样浮动式* * * * * * * * * * * * */利润率:1%; 　　border - radius: 4 px;/* * * * * * * * * * * * * * * * * * * * * * * * * * * *修改前代码* * * * * * * * * * * * * * * * * * * * * * * * * * */p: nth-of-type (1) { 　　填充:0.8雷姆0; 　　} 　　p: nth-of-type (2) { 　　颜色:红色; 　　} 　　.pic-item { 　　高度:11眼动; 　　　　flex-direction:列; 　　justify-content:中心; 　　溢出:隐藏; 　　img { 　　宽度:100%; 　　高度:汽车; 　　border - radius: 4 px; 　　} 　　} 　　} 　　} 　　& lt;/style>

van-list方法如何正确的在vant中使用

上一篇下一篇