.row
.col
.col>.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-10, .col-11, .col-12
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-10
.col-11
.col-12
.x-center
class="row">
class="col">
class="col-3">
view>
class="col-9">
view>
view>
view>
上面的是京東的乙個分類的布局，我用我的布局給你們實現以下(只是布局的實現，並不是全部)
class="row">
class="col">
class="col-3"
style="background:white;height:100%;">
wx:for="
}">
class="row border_padding
}">
class="col x-center"
bindtap="backgroundclick"
data-index="}"
data-toggle="
}">
}view>
view>
block>
view>
class="col-9"
style="background:#f8f8f8;padding:0px 0px 0px 7px">
wx:for="
}">
class="row">
class="col"
style="color:red;">
}view>
view>
class="row x-center">
class="col">
class="col-12">
class=""
wx:for="
}">
class="flex-item"
style="background:white;">
}text>
view>
block>
view>
view>
view>
block>
view>
view>
view>
/* pages/myself/name/name.wxss */
/*分欄*/
.fen_margin_red_
.border_padding
.background_corlor
/*各類推薦*/
.flex-item
page(,,,
,,,],
branddata: [,,
,,,,
,,,]},,,
]},,,
,]}]
},onload: function
(options) ,
//單擊改變分欄的顯示狀態
backgroundclick: function
(e)
}this.setdata()
}}})
微信小程式布局display flex布局介紹
display flex是將物件作為彈性伸縮盒顯示。伸縮盒最新版本 css3 在web網頁中必須要考慮相容性，因為瀏覽器不同，瀏覽器的支援和實現方式也不同，導致相容起來略顯麻煩 設定乙個容器，其中有多個子容器，比如，這是乙個簡單的例子 style width 400px height 120px b...
微信小程式 布局
傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...
實訓第三天 微信小程式元件
2.資料繫結 page.js page 列表渲染 page.js page 條件渲染 webview mina page.js page 3.模板template 頁內模板，只能在本頁面內使用 定義模板 定義乙個名字為model的模板 obj解構後 使用模板 資料 為指令碼定義的obj 解構obj，...