vue实现滑动到底部加载更多效果

  <div class="content"> <div class="logo"> <div> </div><div> <span>{{server[0].companyName}}</span></div><div>  致电客服 </div></div><div class="info"> <div class="swipe">   <div class="jcc"> </div><span class="index">{{activeIndex}}/{{server[0].thUintroduceImg.split(',').length}}</span></div><div class="info1"> <p>{{server[0].thUintroduceText}}</p><span> <i>......</i> 展开</span></div></div><div class="shopping"> <h4> <span>全部商品</span></h4></div><div> <div class="listUl"> <div class="itemLIST"> <div> </div><div> <h3>{{item.pTitle}}</h3><p> <span>已售{{item.pSaleNums}}件</span><span>价格登录可见</span><span>¥{{item.uPrice}}</span></p></div></div><!-- <div style="height:100px">{{item}}</div> --></div></div><div class="isbottom"> <i class="iconfont icon-jiazai1"></i><span>加载中，请稍后</span></div><div class="isbottom"> <span>没有更多数据了</span></div></div>

  .content { .isbottom { display: flex; align-items: center; justify-content: center; padding: 15px 0; color: #999; i { font-size: 30px; animation: rotate 1s infinite; } span { color: #ccc; padding-left: 15px; } } .logo { background: #fff; padding-bottom: 15px; div { &:nth-child(1) { display: flex; justify-content: center; img { width: 60px; height: 60px; } } &:nth-child(2) { text-align: center; padding: 15px 15px; color: #609bf0; } &:nt<i>本文来源gaodai$ma#com搞$$代**码网</i>h-child(3) { display: flex; justify-content: center; align-items: center; color: #1296db; border: #1296db 1PX solid; width: 50%; margin: 0 auto; padding: 5px 0; font-size: 15px; img { width: 20px; height: 20px; margin-right: 8px; } } } } .info { background: #fff; margin-bottom: 10px; padding-bottom: 15px; .swipe { height: 300px; background: #eee; position: relative; .jcc { display: flex; justify-content: center; height: 300px; } img { // width: 100%; height: 100%; } .index { position: absolute; background: rgba(243, 244, 245, .8); padding: 5px 15px; bottom: 10px; right: 10px; border-radius: 50px; } } } .info1 { background: #fff; position: relative; padding: 15px 9px 0; height: 79px; overflow: hidden; p { line-height: 22px; text-indent: 2em; letter-spacing: 1.2px; } span { width: 75px; text-align: right; position: absolute; bottom: 0; right: 9px; color: #39c; background: #fff; i { color: #333; } } } .shopping { background: #fff; padding-top: 15px; h4 { display: flex; align-items: center; justify-content: center; padding-bottom: 10px; >img { width: 30px; height: 30px; margin-right: 10px; } span { color: #0f589e; font-weight: normal; } } img { display: block; width: 100%; height: 2px; } } .listUl { // display: flex; // flex-wrap: wrap; padding: 0 15px; top: 60px; height: calc(100% - 100px) !important; background: #fff; overflow: hidden; .itemLIST { // float: left; width: 50%; display: inline-block; padding-top: 15px; padding-bottom: 15px; &:nth-child(2n) { padding-right: 5px; } &:nth-child(2n -1) { padding-left: 5px; } img { // width: 100%; height: 100%; /* prettier-ignore */ // border: 1PX solid #eee; } div { &:first-child { overflow: hidden; height: 160px; display: flex; align-items: center; justify-content: center; } &:last-child { h3 { font-weight: normal; font-size: 16px; margin-top: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } p { font-size: 14px; margin-top: 5px; display: flex; align-items: center; justify-content: space-between; // padding: 0 15px; padding-right: 10px; span { display: block; &:first-child { color: #888; } &:last-child { color: red; font-size: 16px; } } } } } } } }