js代码块

  1.  spellingSollt() {
  2.                 var scrollDiv = $("#spelling"),
  3.                     $ul = scrollDiv.find("ul"),
  4.                     $li = scrollDiv.find("li"),
  5.                     $length = $li.length,
  6.                     $liHeight = $li.height(),
  7.                     num = 0; 
  8.                 if(scrollDiv.length == 0) {
  9.                     return;
  10.                 } 
  11.                 if($length > 1) {
  12.                     $ul.append($li.eq(0).clone());
  13.                     setInterval(
  14.                         function() {
  15.                             num++;
  16.                             // * (num)  样式错乱老是会留下间隙   问题就出在num元素里面   这个是控制元素偏移量
  17.                             $ul.addClass("animate").css("-webkit-transform", "translateY(-" + $liHeight+ "px)");
  18.                             setTimeout(
  19.                                 function() {
  20.                                     if(num == $length) {
  21.                                         $ul.removeClass("animate").css("-webkit-transform", "translateY(0)");
  22.                                         num = 0;
  23.                                     }
  24.                                 }, 80);
  25.                         }, 3000);
  26.                 }
  27.             },

html

  1. <div class="spelling-box" id="spelling" v-if='spellingArr.length > 1'>
  2.                 <ul>
  3.                     <li class="spelling-box-list" v-for="(item,index) in spellingArr">
  4.                         <div class="spelling-box-list-left"><img :src="item.image" alt=""></div>
  5.                         <div class="spelling-box-list-text">
  6.                             <div class="spelling-box-list-xxi">
  7.                                 <div>{{item.name}}</div>
  8.                                 <div class="spelling-time1" :data-time="item.time">{{item.time}}</div>
  9.                             </div> 
  10.                             <div>还差{{item.age}}人完成拼单</div>
  11.                         </div>
  12.                         <div class="spelling-box-list-right"> 
  13.                             <div @click="spellingSollt()"><span>去拼单</span></div>
  14.                         </div>
  15.                     </li> 
  16.                 </ul>
  18.             </div>