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

wemall 發布于2019-08-26 13:37 / 1109人閱讀

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

一、實踐踩坑

項目使用mpvue開發

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

2. 在scroll-view里面添加定寬元素，超過scroll-view寬度（設置了100%，即屏幕寬度)后，它竟然換行了。所以要scroll-view的樣式要這樣設置：

    scroll-view {
      width: 100%;
      white-space: nowrap;  // 不讓它換行
    }

3. 然后在定寬元素里邊添加子容器：

// html大概長這樣

  
    
    
  
  
    
    
  
  
    
    
  


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

然后發現.tab-item并沒有排在一行上。。說明scroll-view和.tab-item都設置display: flex無效？無奈之下，只好在它外邊再包一層，然后樣式設置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就基本如我所愿了，大概長這樣：

二、隱藏滾動條

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

/*隱藏滾動條*/

::-webkit-scrollbar{

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

}

或者有的人說這樣子：

/*隱藏滾動條*/

::-webkit-scrollbar{

    display: none;

}

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

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

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

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

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

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

大概意思是這樣：

GPU云服務器云服務器 java滾動條的事件 js判斷滾動條的高度微信小程序技術實現 listview橫向滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109198.html

初探uni-app框架踩坑

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

neu 2019-08-26 10:15 評論0 收藏0
微信小程序知識總結及案例集錦

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

sean 2019-08-20 17:45 評論0 收藏0
微信小程序——商城篇

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

k00baa 2019-08-26 12:01 評論0 收藏0
微信小程序之scroll-view的flex布局問題

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

nihao 2019-08-23 14:43 評論0 收藏0
小愛童鞋@你，一起來擼個小程序吧

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

MiracleWong 2019-08-29 15:40 評論0 收藏0