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

資訊專欄INFORMATION COLUMN

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

nihao / 1105人閱讀

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

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

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實現(xiàn)瀑布流（multi-column多列及flex布局）

實現(xiàn)單行及多行文字超出后加省略號

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

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

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

相關(guān)文章

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

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

    wemall 評論0 收藏0

  • 微信小程序——商城篇

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

    k00baa 評論0 收藏0

  • 兩行代碼實現(xiàn)微信小程序聯(lián)系人sidebar

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

    cnTomato 評論0 收藏0

  • 兩行代碼實現(xiàn)微信小程序聯(lián)系人sidebar

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

    RayKr 評論0 收藏0

發(fā)表評論

0條評論

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