微信小程式按比例分配元件(以View為例)

2021-08-16 22:20:24 字數 592 閱讀 8260

view元件是比較常用的元件,而且通常是按照一定比例來分配它的大小。

效果圖:

就高度而言,

①、可以按照正常的固定數值來分配高度

②、可以按比例分配

③、當然還可以部分固定高度,其它用它剩餘的高度。

直接上**,邊看邊講

.wxml檔案,我們給它不同部分的高度起個名字section_up_height、section_down_height:

這裡我們為了好區分,用顏色來區分,調整.wxss檔案:

/* pages/plan/plan.wxss */ 

.section_up

.section_down

最後是.js檔案,這裡完成我們的邏輯,比如按比例分配:

// pages/plan/plan.js

page()}})

}})

ok,學會了~

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...

微信小程式 Tabs元件

如果想要個性的話,可以自己修改了。這次是寫乙個tabs的元件,根據不同的狀態,回來切換操作,標記一下,先看一下效果圖 獲取,試例裡用匯入的引用,都可以從github裡找到。tabs.wxss 檔案.tabscss tabscss tab tabscss last child tabscss tab ...