微信小程式開發 元件 3

2022-08-26 13:09:17 字數 3159 閱讀 6705

group 

class="

radio-group

"bindchange="

radiochange

">

class="

radio

" wx:for="

}">

"}"checked="

}" color='

pink

'/>}

page(,,,

,,,]

},radiochange: function(e)

})

從底部彈起的滾動選擇器。

class="

section

">

class="

section__title

">普通選擇器

"bindpickerchange

" value="

}" range="

}">

class="

picker

">當前選擇:}

class="

section

">

class="

section__title

">多列選擇器

"multiselector

" bindchange="

bindmultipickerchange

" bindcolumnchange="

bindmultipickercolumnchange

" value="

}" range="

}">

class="

picker

">當前選擇:},},}

class="

section

">

class="

section__title

">時間選擇器

"time

" value="

}" start="

09:01

" end="

21:01

" bindchange="

bindtimechange

">

class="

picker

">當前選擇: }

class="

section

">

class="

section__title

">日期選擇器

"date

" value="

}" start="

2015-09-01

" end="

2017-09-01

" bindchange="

binddatechange

">

class="

picker

">當前選擇: }

class="

section

">

class="

section__title

">省市區選擇器

"region

" bindchange="

bindregionchange

" value="

}" custom-item="

}">

class="

picker

">當前選擇:},},}

page(,,,

],index: 0,

multiarray: [[

'無脊柱動物

', '

脊柱動物

'], ['

扁性動物

', '

線形動物

', '

環節動物

', '

軟體動物

', '

節肢動物

'], ['

豬肉絛蟲

', '

吸血蟲'

]], objectmultiarray: [[,

], [,,

,,

], [,]

],multiindex: [

0, 0, 0

], date:

'2016-09-01',

time:

'12:01',

region: [

'廣東省

', '

廣州市', '

海珠區'

], customitem: '全部

'},bindpickerchange: function (e) )

},bindmultipickerchange: function (e) )

},bindmultipickercolumnchange: function (e) ;

data.multiindex[e.detail.column] =e.detail.value;

switch

(e.detail.column)

data.multiindex[

1] = 0

; data.multiindex[

2] = 0

;

break

;

case1:

switch (data.multiindex[0

])

break

;

case1:

switch (data.multiindex[1

])

break

; }

data.multiindex[

2] = 0

;

break

; }

console.log(data.multiindex);

this

.setdata(data);

},binddatechange: function (e) )

},bindtimechange: function (e) )

},bindregionchange: function (e) )

}})

微信小程式元件化開發

官方介紹 本次demo目錄結構 page下兩個資料夾,乙個components,用於存放元件 乙個home,為我們的主要頁面 components裡面兩個元件,乙個banner,乙個news,都是都過右鍵 新建component 生成的 第一步 配置 home.json 使頁面能使用元件 home....

微信小程式 元件化開發

7.slot 插槽的使用 8.component構造器 類似於頁面,自定義元件由json,wxml,wxss,js四個檔案 在wxml檔案中編寫屬於元件自己的模板 在wxss中編寫屬於元件的相關樣式 在js檔案中定義資料結構和相關邏輯 以home頁面為例 1.先在home.json中進行註冊 usi...

微信小程式開發 元件 5

編輯器匯出內容支援帶標籤的html和純文字的text,編輯器內部採用delta格式進行儲存。通過setcontents介面設定內容時,解析插入的html可能會由於一些非法標籤導致解析錯誤,建議開發者在小程式內使用時通過 delta 進行插入。富文字元件內部引入了一些基本的樣式使得內容可以正確的展示,...