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

資訊專欄INFORMATION COLUMN

微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)

wemall / 1140人閱讀

摘要：此時正確姿勢如下變成這樣子不讓它換行到這里，就基本如我所愿了，大概長這樣二隱藏滾動條在網(wǎng)上搜了很多，都是說加上這段代碼就可以隱藏滾動條或者有的人說這樣子隱藏滾動條然而兩種方法我都試過，的滾動條依然存在。。

一、實踐踩坑

項目使用mpvue開發(fā)

1. scroll-view默認是不滾動的。。所以要先設(shè)置scroll-x="true"或者scroll-y="true"

2. 在scroll-view里面添加定寬元素，超過scroll-view寬度（設(shè)置了100%，即屏幕寬度)后，它竟然換行了。所以要scroll-view的樣式要這樣設(shè)置： 
    scroll-view {
      width: 100%;
      white-space: nowrap;  // 不讓它換行
    }
3. 然后在定寬元素里邊添加子容器： 
// html大概長這樣

  

    
    

  

  

    
    

  

  

    
    

  



// css相應(yīng)就大概長這樣
scroll-view {
    display: flex;
    flex-wrap: nowrap;
}
.tab-item {
    display: flex;
    justify-content: center;
    width: 25%;
    ...
}

然后發(fā)現(xiàn).tab-item并沒有排在一行上。。說明scroll-view和.tab-item都設(shè)置display: flex無效？無奈之下，只好在它外邊再包一層，然后樣式設(shè)置display: inline-block。此時正確姿勢如下：

// html


  
    

      

        
        

      

    

  



// css變成這樣子
scroll-view {
  width: 100%;
  white-space: nowrap;  // 不讓它換行
}

.tab-container {
  display: inline-block;
  width: 25%;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    ...
}

到這里，scroll-view就基本如我所愿了，大概長這樣：

二、隱藏滾動條

在網(wǎng)上搜了很多，都是說加上這段代碼就可以：

/*隱藏滾動條*/

::-webkit-scrollbar{

    width: 0;
    
    height: 0;
    
    color: transparent;

}

或者有的人說這樣子：

/*隱藏滾動條*/

::-webkit-scrollbar{

    display: none;

}

然而兩種方法我都試過，scroll-view的滾動條依然存在。。測試機型是安卓機子。

但是用display: none這種方法是可以隱藏掉頁面的滾動條的，就是scroll-view的滾動條沒隱藏掉。

后來，在小程序社區(qū)看到官方人員這樣子解答：

是的，就是這種野路子。當(dāng)然 ，它下面的評論里也有人提供了另一種解決思路方法，但我還是選擇了官方說的那種野路子方法。傳送門
實現(xiàn)思路就是，在scroll-view外邊再包一個容器，它的高度小于scroll-view的高度，這樣就會截掉滾動條，達到隱藏了滾動條的效果。

// scss
.scroll-view-container {  // 包裹scroll-view的容器
    height: $fakeScrollHeight;
    overflow: hidden;  // 這個設(shè)置了就能截掉滾動條啦
    scroll-view {
      width: 100%;
      white-space: nowrap;
    }
  }

  .tab-container {  // 我這里是用.tab-container來撐開scroll-view的高度，所以高度在它上面設(shè)置,加上padding，那么它就會比外層容器（.scroll-view-container）要高
    display: inline-block;
    width: 26%;
    height: $fakeScrollHeight;
    padding-bottom: $scrollBarHeight;
  }

大概意思是這樣：

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

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

相關(guān)文章

  • 初探uni-app框架 踩坑

    摘要：近些天有接觸到框架，使用軟件進行編譯，能生成多端項目文件，如微信百度支付寶小程序及和端，記錄遇到的問題條件編譯我覺得比較突出的一點功能，就是這個條件編譯，指定對應(yīng)的代碼執(zhí)行在對應(yīng)的一端僅在某平臺存在除了某平臺均存在如只在微信小程序中才執(zhí)行 近些天有接觸到uni-app框架，使用HBuilderX軟件進行編譯，能生成多端項目文件，如微信、百度、支付寶小程序及Android和ios端，記錄...

    neu 評論0 收藏0

  • 微信小程序知識總結(jié)及案例集錦

    摘要：對微信小程序進行全局配置，決定頁面文件的路徑窗口表現(xiàn)設(shè)置網(wǎng)絡(luò)超時時間設(shè)置多等。 微信小程序知識總結(jié)及案例集錦 微信小程序的發(fā)展會和微信公眾號一樣，在某個時間點爆發(fā) 學(xué)習(xí)路徑 微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達 微信官方文檔 認真跟著文檔看一遍，相信有vue前端經(jīng)驗的看下應(yīng)該就能上手了，然后安裝 微信小程序開發(fā)者工具 新建一個quick start項目，了解代碼結(jié)構(gòu)，...

    sean 評論0 收藏0

  • 微信小程序——商城篇

    摘要：微信小程序之跳轉(zhuǎn)在進入商品詳情頁以后，點擊左下角的圖標原應(yīng)該跳轉(zhuǎn)到首頁，但是一直點也不跳，而且也不報錯。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業(yè)務(wù)需求來。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開發(fā)小程序變的越來越便捷和強大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...

    k00baa 評論0 收藏0

  • 微信小程序之scroll-view的flex布局問題

    摘要：關(guān)于微信小程序的組件，第一次寫的時候是直接在中用了一層容器包裹子元素，然后用了布局，并且是用了組件來實現(xiàn)的橫向滾動，后面有提出改進，但是不記錄下，就發(fā)現(xiàn)過了幾天，就有點懵了效果圖在里加一層容器，使用布局實現(xiàn)這里用布局實現(xiàn)的話，就要用組 關(guān)于微信小程序的scroll-view組件，第一次寫的時候是直接在scroll-view中用了一層容器包裹子元素，然后用了flex布局，并且是用了組件來...

    nihao 評論0 收藏0

  • 小愛童鞋@你，一起來擼個小程序吧

    摘要：輪播圖區(qū)域這里微信小程序給我們提供了組件，直接用就可以了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局首頁商品展示區(qū)這里的商品都是分塊展示，很有規(guī)律，因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

    MiracleWong 評論0 收藏0

發(fā)表評論

0條評論

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