成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序?qū)崿F(xiàn)橫向滑塊，超過10個(gè)則出現(xiàn)查看更多

baiy / 1699人閱讀

摘要：需求是小程序下增加橫向滑塊，用于展示專題列表思路是用遇到的問題是超過個(gè)后，我添加的點(diǎn)擊更多塊總是居下顯示解決辦法是給最后點(diǎn)擊更多的塊加上啊啊啊啊啊查看全部單品最后效果

需求是小程序banner下增加橫向滑塊，用于展示專題列表 
1.思路是用 scroll-view + scroll-x="true"
2.遇到的問題是：超過10個(gè)后，我添加的點(diǎn)擊更多塊總是居下顯示


解決辦法是：給最后點(diǎn)擊更多的塊加上vertical-align: top;
HTML 
       
         
            
          啊啊啊啊啊
          ￥456{{index}}
         
         
            +10
            查看全部單品
CSS 
    .special-list{
    width: 100%;
    height: 307rpx;
    overflow: hidden;
    padding: 20rpx 0 0 38rpx;
    background: #fff;
    white-space: nowrap;
    .special-scroll{
      height: 330rpx;width: auto;overflow:hidden;
    }
    .special-item{
      height:184rpx;
      width: 184rpx;
      display: inline-block;
      margin-right:40rpx;
      background-color: #aaa;
      .image{
        height:184rpx;
        width: 184rpx;
      }
    }
    .name{
      font-size: 20rpx;
      color: $normalGrayFont;
      -webkit-line-clamp:1;
      overflow: hidden;
      display:-weblit-box;
      word-break: break-all;
      text-overflow: ellipsis;
    }
    .price{
      font-size:28rpx;
    }
    .special-item-last{
      height:184rpx;
      width: 184rpx;
      border:2rpx solid #ffffd;
      border-radius:2rpx;
      display: inline-block;
      margin-right:40rpx;
      text-align: center;
      vertical-align: top;
      padding:44rpx 0;
    }
  }
最后效果

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116370.html

相關(guān)文章

  • 反射改變TabLayout屬性

    摘要：第二種在原有基礎(chǔ)上通過繼承控件，重寫其中幾個(gè)方法，并且通過反射來修改部分屬性，也能達(dá)到第一種方案效果。因此這里需要用反射替換成自己的滑動監(jiān)聽，然后在的監(jiān)聽類中的方法，改變的顏色。通過反射找到源碼中成員變量，然后設(shè)置暴力訪問權(quán)限。 目錄介紹 01.遇到的實(shí)際需求分析 02.原生TabLayout局限 03.TabLayout源碼解析 3.1 Tab選項(xiàng)卡如何實(shí)現(xiàn) 3.2 滑動切換T...

    GeekGhc 評論0 收藏0

  • 阿里云存儲，讓更多的創(chuàng)新在身邊發(fā)生

    摘要：憑借多層次防護(hù)跨區(qū)域容災(zāi)等能力，阿里云已經(jīng)連續(xù)三年入選全球云存儲魔力象限，位列全球領(lǐng)導(dǎo)者地位這樣的殊榮，真的是不多見。通過持續(xù)不斷的努力，阿里云希望解決這些問題，讓更多的創(chuàng)新在我們身邊發(fā)生。 作者｜康翔 編輯｜阿冒? ?設(shè)計(jì)｜沐由 在個(gè)人有限的技術(shù)領(lǐng)域和視野內(nèi)，縮略語CDS的指向一直非...

    pingan8787 評論0 收藏0

  • better-scroll與UC瀏覽器滑動翻頁沖突的js解決方案

    摘要：問題最近在用寫端項(xiàng)目時(shí)發(fā)現(xiàn)個(gè)問題，的橫向滑動和瀏覽器的橫向滑動翻頁效果出現(xiàn)了沖突。思路我們雖然不能禁止瀏覽器的跳轉(zhuǎn)操作，但是我們可以阻止滑動元素觸發(fā)的所有默認(rèn)事件啊。 問題： 最近在用vue寫m端項(xiàng)目時(shí)發(fā)現(xiàn)個(gè)問題，better-scroll的橫向滑動和UC瀏覽器的橫向滑動翻頁效果出現(xiàn)了沖突。 簡單的說，就是滑動scroll組件的時(shí)候也會觸發(fā)UC瀏覽器自帶的翻頁效果。 為此在網(wǎng)上找了不少...

    anquan 評論0 收藏0

  • 12個(gè)值得關(guān)注的頂級可視化JS庫 涉及圖表、動畫、時(shí)間處理，表格操作

    摘要：本文是譯文，原文是我在原文的基礎(chǔ)上加了百度的圖表庫，這個(gè)也是毫不遜色其他圖表庫的。更新記錄圖表類數(shù)據(jù)驅(qū)動文檔通常被稱為最強(qiáng)大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉(zhuǎn)或可滑動滾動和快速性能的能力。 本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎(chǔ)上加了百度的Echats圖表庫，這個(gè)也是毫不遜色其他圖表...

    JinB 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<