亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

小卡片左右滑動(dòng)的實(shí)現(xiàn)

jsbintask / 3627人閱讀

摘要：副卡只為最右測(cè)卡片適配問(wèn)題適配問(wèn)題涉及到了兩個(gè)卡片的接口數(shù)據(jù)全部讀完并渲染完成后，卡片完美呈現(xiàn)，上的滑動(dòng)也很流暢，但是當(dāng)滑動(dòng)的速度很快的時(shí)候，安卓上就有問(wèn)題了，滑動(dòng)速度過(guò)快會(huì)導(dǎo)致剛滑出來(lái)的卡片變成白板，卡片上的圖片和文字都不見(jiàn)了。

背景

項(xiàng)目需求，要實(shí)現(xiàn)卡片左右滑動(dòng)的功能，類(lèi)似這樣：

在實(shí)現(xiàn)過(guò)程中遇到了如下問(wèn)題：

卡片角標(biāo)實(shí)現(xiàn)

邊距問(wèn)題

安卓手機(jī)適配問(wèn)題

翻頁(yè)問(wèn)題

角標(biāo)實(shí)現(xiàn)

角標(biāo)及文字可以采用絕對(duì)定位和css3的rotate來(lái)實(shí)現(xiàn)，注意點(diǎn)是在父元素上要overflow：hidden

.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;
    }
邊距問(wèn)題

這一列卡片初始化時(shí)距離手機(jī)左邊是有一段距離的，但是整體可以滑動(dòng)到手機(jī)最左側(cè)，這一點(diǎn)卡了一點(diǎn)時(shí)間，其實(shí)就是給第一個(gè)卡片設(shè)一個(gè)margin-left而已；最后一個(gè)卡片距離手機(jī)最右側(cè)也有邊距，但這時(shí)候設(shè)置margin-right是無(wú)效的，此時(shí)最右測(cè)的卡片會(huì)緊貼著屏幕邊緣，我的解決辦法是在卡片的右側(cè)再寫(xiě)一項(xiàng)卡片，設(shè)置這個(gè)卡片的寬度是1px，內(nèi)容為空，這時(shí)剛剛的margin-right就有效了。

    
        
  • 
          
          
    
            
            
    {{item.title}}
    
            
            
    {{item.text}}
    
          
    
        
    • 
        
  •
適配問(wèn)題

適配問(wèn)題涉及到了兩個(gè)：
1.卡片的接口數(shù)據(jù)全部讀完并渲染完成后，卡片完美呈現(xiàn)，ios上的滑動(dòng)也很流暢，但是當(dāng)滑動(dòng)的速度很快的時(shí)候，安卓上就有問(wèn)題了，滑動(dòng)速度過(guò)快會(huì)導(dǎo)致剛滑出來(lái)的卡片變成白板，卡片上的圖片和文字都不見(jiàn)了。原因是瀏覽器的渲染引擎太慢，解決辦法是給ul添加

transform: translate3d(0,0,0);

這一行代碼會(huì)觸發(fā)硬件加速，使用GPU來(lái)渲染頁(yè)面。速度再快也不會(huì)有問(wèn)題了
2.由于采用了overflow：scoll，當(dāng)卡片多出屏幕時(shí)可以滾動(dòng)呈現(xiàn)，但我們并不希望出現(xiàn)滾動(dòng)條。在安卓上確實(shí)沒(méi)有，但ios上卻是有的?？上У氖俏也](méi)有看到有啥屬性可以設(shè)置滾動(dòng)條不可見(jiàn)。
后來(lái)發(fā)現(xiàn)滾動(dòng)條永遠(yuǎn)在ul元素的最下面，基本貼在bottom上，所以解決辦法是：將ul的高度設(shè)高一點(diǎn)，使之超過(guò)里面li的高度和滾動(dòng)條的高度，然后設(shè)置ul的父元素overflow：hidden來(lái)隱藏掉，OK。

翻頁(yè)問(wèn)題

效果類(lèi)似輪播圖，只是需要在小卡片上進(jìn)行上下輪播，這里采用的絕對(duì)定位+animation來(lái)實(shí)現(xiàn)的，需要注意的是分段時(shí)間的把控，在到達(dá)時(shí)間的20%的時(shí)候，就要到達(dá)bottom：0，至?xí)r間的50%，一直維持在bottom：0，造成一種靜止效果，然后再進(jìn)行動(dòng)畫(huà)滾動(dòng)。

@-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;
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113189.html

相關(guān)文章

  • 如何做活動(dòng)頁(yè)面的滾動(dòng)動(dòng)畫(huà)？讓用戶(hù)體驗(yàn)MAX的demo在這里！

    摘要：此時(shí)需要判斷當(dāng)前位置是否大于或者小于，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動(dòng)方向。 本文由云+社區(qū)發(fā)表 最近的一個(gè)活動(dòng)頁(yè)面需要做一個(gè)可以左右滑動(dòng)的抽簽效果，故通過(guò)用css的transform屬性和js結(jié)合來(lái)模擬可以無(wú)限滾動(dòng)的效果。 先上效果： showImg(https://s...

    rollback 評(píng)論0 收藏0

  • 如何做活動(dòng)頁(yè)面的滾動(dòng)動(dòng)畫(huà)？讓用戶(hù)體驗(yàn)MAX的demo在這里！

    摘要：此時(shí)需要判斷當(dāng)前位置是否大于或者小于，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動(dòng)方向。 本文由云+社區(qū)發(fā)表 最近的一個(gè)活動(dòng)頁(yè)面需要做一個(gè)可以左右滑動(dòng)的抽簽效果，故通過(guò)用css的transform屬性和js結(jié)合來(lái)模擬可以無(wú)限滾動(dòng)的效果。 先上效果： showImg(https://s...

    gaara 評(píng)論0 收藏0

  • 如何做活動(dòng)頁(yè)面的滾動(dòng)動(dòng)畫(huà)？讓用戶(hù)體驗(yàn)MAX的demo在這里！

    摘要：此時(shí)需要判斷當(dāng)前位置是否大于或者小于，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動(dòng)方向。 本文由云+社區(qū)發(fā)表 最近的一個(gè)活動(dòng)頁(yè)面需要做一個(gè)可以左右滑動(dòng)的抽簽效果，故通過(guò)用css的transform屬性和js結(jié)合來(lái)模擬可以無(wú)限滾動(dòng)的效果。 先上效果： demo地址：https://kir...

    timger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<