項目需求,要實現卡片左右滑動的功能,相似這樣:css
在實現過程當中遇到了以下問題:ios
角標及文字能夠採用絕對定位和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; }