<del id="o6q0a"></del>

<fieldset id="o6q0a"></fieldset>

<del id="o6q0a"></del>

<fieldset id="o6q0a"></fieldset>

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

nihao 發布于2019-08-23 14:43 / 1103人閱讀

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

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

1.效果圖

2.在scroll-view里加一層容器，使用flex布局實現

這里用flex布局實現的話，就要用組件的形式

wxss文件

.scrollView{
  padding: 0 20rpx;
  white-space: nowrap;
  box-sizing: border-box;
}
.item{
  display: inline-block;
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}

.scrollView1{
  display: flex;
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.item1{
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}
.scrollView2{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.itemContainer{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.scrollItem{
  margin-right: 20rpx;
}

.scrollView3{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.item3{
  margin-right: 20rpx;
  /* width: calc(100% / 3); */
  width: 240rpx;
  height: 100rpx;
  background: #aa22dd;
}

wxml文件

子組件里就一個view標簽，可以自己直接寫

3.直接使用display：inline-block

wxml文件

4.自己的理解

scroll-view不可以直接使用flex布局，使用flex布局會使得他不會按照預想的那樣橫向排列、滾動

要使用flex布局則要麻煩一點

如果直接使用flex布局，不用子組件的話，則會被擠成一排

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實現瀑布流（multi-column多列及flex布局）

實現單行及多行文字超出后加省略號

微信小程序之購物車和父子組件傳值及calc的注意事項

GPU云服務器云服務器微信小程序的功能微信小程序的開發免費的微信小程序微信小程序支持的js

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

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

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

摘要：此時正確姿勢如下變成這樣子不讓它換行到這里，就基本如我所愿了，大概長這樣二隱藏滾動條在網上搜了很多，都是說加上這段代碼就可以隱藏滾動條或者有的人說這樣子隱藏滾動條然而兩種方法我都試過，的滾動條依然存在。。一、實踐踩坑項目使用mpvue開發 1. scroll-view默認是不滾動的。。所以要先設置scroll-x=true或者scroll-y=true showImg(https...

wemall 2019-08-26 13:37 評論0 收藏0
微信小程序——商城篇

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

k00baa 2019-08-26 12:01 評論0 收藏0
兩行代碼實現微信小程序聯系人sidebar

摘要：七后記過程最近微信小程序很火爆，我也嘗試著做個天氣軟件試試手，在做到城市列表的時難倒我了首先了解的屬性，把一個值賦給這個屬性，那么對應值的組件就會置頂在的頂部，舉例如果贛州這個的是，那你把的值設置成，那一打開贛州就會出現在頂部。作者：Z帥來襲來自：授權地址轉自：微信小程序聯盟? 話不多說，先給你們看看核心數據和結構：一、數據： city的json array，letter的arra...

cnTomato 2019-08-21 15:06 評論0 收藏0
兩行代碼實現微信小程序聯系人sidebar

摘要：七后記過程最近微信小程序很火爆，我也嘗試著做個天氣軟件試試手，在做到城市列表的時難倒我了首先了解的屬性，把一個值賦給這個屬性，那么對應值的組件就會置頂在的頂部，舉例如果贛州這個的是，那你把的值設置成，那一打開贛州就會出現在頂部。作者：Z帥來襲來自：授權地址轉自：微信小程序聯盟? 話不多說，先給你們看看核心數據和結構：一、數據： city的json array，letter的arra...

RayKr 2019-08-14 17:15 評論0 收藏0