小卡片左右滑動的實現

背景

項目需求,要實現卡片左右滑動的功能,相似這樣:css

圖片描述

在實現過程當中遇到了以下問題:ios

  1. 卡片角標實現
  2. 邊距問題
  3. 安卓手機適配問題
  4. 翻頁問題

角標實現

角標及文字能夠採用絕對定位和css3的rotate來實現,注意點是在父元素上要overflow:hiddencss3

.recomm-item-sup{
      position: absolute;
      /*background-color: aquamarine;*/
      color: #fff;
      font-size: 9px;
      height: 34px;
      width: 46px;
      line-height: 58px;
      left: 45px;
      top: -12px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

邊距問題

這一列卡片初始化時距離手機左邊是有一段距離的,可是總體能夠滑動到手機最左側,這一點卡了一點時間,其實就是給第一個卡片設一個margin-left而已;最後一個卡片距離手機最右側也有邊距,但這時候設置margin-right是無效的,此時最右測的卡片會緊貼着屏幕邊緣,個人解決辦法是在卡片的右側再寫一項卡片,設置這個卡片的寬度是1px,內容爲空,這時剛剛的margin-right就有效了。web

<ul class="recom-ul">
        <li class="recomm-item" v-for="(item,index) in slaveButtonListObj.slaveButtonList" v-if="item.isVisible ==1" v-on:click="btnEvent(index)">
          <!--副卡-->
          <div class="recomm-item-con" v-if="item.isHot == 0">
            <img v-if="item.tipIcon && item.title" class="recomm-tip-icon" :src="item.tipIcon" alt="">
            <div v-if="item.tipIcon && item.title" class="recomm-item-sup">{{item.title}}</div>
            <img class="rec-img" :src="item.icon">
            <div class="recomm-item-title">{{item.text}}</div>
          </div>
        </li>
        <li class="recomm-item-visible"></li><!--只爲最右測卡片-->
      </ul>

適配問題

適配問題涉及到了兩個:
1.卡片的接口數據所有讀完並渲染完成後,卡片完美呈現,ios上的滑動也很流暢,可是當滑動的速度很快的時候,安卓上就有問題了,滑動速度過快會致使剛滑出來的卡片變成白板,卡片上的圖片和文字都不見了。緣由是瀏覽器的渲染引擎太慢,解決辦法是給ul添加瀏覽器

transform: translate3d(0,0,0);

這一行代碼會觸發硬件加速,使用GPU來渲染頁面。速度再快也不會有問題了
2.因爲採用了overflow:scoll,當卡片多出屏幕時能夠滾動呈現,但咱們並不但願出現滾動條。在安卓上確實沒有,但ios上倒是有的。惋惜的是我並無看到有啥屬性能夠設置滾動條不可見。
後來發現滾動條永遠在ul元素的最下面,基本貼在bottom上,因此解決辦法是:將ul的高度設高一點,使之超過裏面li的高度和滾動條的高度,而後設置ul的父元素overflow:hidden來隱藏掉,OK。
圖片描述動畫

翻頁問題

效果相似輪播圖,只是須要在小卡片上進行上下輪播,這裏採用的絕對定位+animation來實現的,須要注意的是分段時間的把控,在到達時間的20%的時候,就要到達bottom:0,至時間的50%,一直維持在bottom:0,形成一種靜止效果,而後再進行動畫滾動。spa

@-webkit-keyframes carouse{
    0%{bottom:-80px;}
    20%{bottom:0}
    50%{bottom:0}
    75%{bottom:80px;}
    100%{bottom:80px;}
  }
.recomm-caro-item{
      position: absolute;
      -webkit-animation:2.5s carouse infinite linear;
      width: 72px;
      height: 80px;
      left: 0;
      right: 0;
      bottom: -80px;
      background: #22ba66;
      border-radius: 5px;
    }
相關文章
相關標籤/搜索