微信小程式元件封裝

2022-04-21 12:25:32 字數 963 閱讀 6583

第一步,在page下面新建乙個template檔案,如下圖

第二部,在template.wxml中編寫公用元件即要封裝的**模組

<

template

name

="mars"

>

<

view

>

<

text

>mars}

text

>

view

>

template

>

第三部,在需要使用封裝的元件的wxml檔案裡引入,此步最關鍵

<

view

class

='address'

bindtap

='onchangeaddress'

>

<

template

is="mars"

data

="}"

>

template

>

<

input

class

='choose-address'

placeholder

='請選取地點'

value

='}'

>

input

>

view

>

<

import

src="/pages/template/template.wxml"

/>

注意:元件的傳值我也解除安裝**中了,在父元件index.wxml中新增 data="}" 在子元件中是可以直接獲取到selectrole和step的值的

就是這麼簡單粗暴的不行

微信小程式元件

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

微信小程式 元件

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

元件封裝 微信小程式 底部彈框

模仿ios瀏覽器底部彈框效果。遮罩層淡入淡出,彈框高度根據內容自適應。popup bottom.js component data ready function this.setdata methods bind this 0 onshow function this.data animation....