Vue-在一個固定的盒子里,內容列表滾動加載更多


藍色圈中的div,高度固定,紅框圈中的時ul-li,滾動可加載更多;
源碼如下:

<div class="index_mode4" v-if="hasData">
    <div class="index_mode4_title">
    	<h2>最近訪客</h2>
    	<span>記錄當天最新訪問次數</span>
    </div>
    <div class="scrolllistBox" @scroll="scrollEvent">
        <ul class="list_ul"  :scrollTopForApp="scrollTopForApp">
                <li :class="item.time.substring(0,10)==nowTime?'timenow':''" v-for="item in typeData1" :key="item.id" v-if="item.data.length>0">
        	   <p class="time"><span>{{item.time}}</span></p>
        	   <div class="ullist2">
            		<div class="userinfo" v-for="item2 in item.data">
            			<span class="userhead"><img :src="item2.avatar"/></span>
            			 <span class="username">{{item2.nickname}}</span>
            			 <a :href="'userinfo.html?openid='+item2.openid" class="goIntime">瀏覽過{{item2.num}}次</a>
            		</div>
        	   </div>
        	</li>
       </ul>
        <p class="overData">到底咯~</p>
   </div>
</div>

 

 scrollEvent(e) {
         // 獲取滾動時的高度
        heightAll=e.target.scrollHeight;
        this.scrollTopForApp = e.target.scrollTop || 0;
        if(this.scrollTopForApp + 500 > heightAll&&this.ishaveData==1){
            //執行列表加載更多功能
       }
   }

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM