亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

微信小程序之scroll-view的flex布局問(wèn)題

nihao / 1174人閱讀

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

關(guān)于微信小程序的scroll-view組件，第一次寫的時(shí)候是直接在scroll-view中用了一層容器包裹子元素，然后用了flex布局，并且是用了組件來(lái)實(shí)現(xiàn)的橫向滾動(dòng)，后面有提出改進(jìn)，但是不記錄下，就發(fā)現(xiàn)過(guò)了幾天，就有點(diǎn)懵了
1.效果圖
2.在scroll-view里加一層容器，使用flex布局實(shí)現(xiàn) 
這里用flex布局實(shí)現(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文件

子組件里就一個(gè)view標(biāo)簽，可以自己直接寫

3.直接使用display：inline-block

wxml文件
4.自己的理解

scroll-view不可以直接使用flex布局，使用flex布局會(huì)使得他不會(huì)按照預(yù)想的那樣橫向排列、滾動(dòng)

要使用flex布局則要麻煩一點(diǎn)

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

正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

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

微信小程序之購(gòu)物車和父子組件傳值及calc的注意事項(xiàng)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101044.html

相關(guān)文章

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

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

    wemall 評(píng)論0 收藏0

  • 微信小程序——商城篇

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

    k00baa 評(píng)論0 收藏0

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

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

    cnTomato 評(píng)論0 收藏0

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

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

    RayKr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<