微信小程式 元件

官方文件見:

我們的封裝:

var basecomponentoption = require("../../utils/basecomponentoption");

var option =basecomponentoption.init(,
//最小值限制
min: ,
//最大值
max:,
//當前值
value: 
},//
傳參物件,和 官方文件一致,只是內部做了封裝,預設提供乙個 entity:object , style:string 的引數
attached() ,
ready() ,
methods:
}console.log(
this
.data.value);
this.data.value--;
this.setdata(this
.data);
this.triggerevent('change', this
.data.value) 
},add(e)
}this.data.value++;
this.setdata(this
.data) 
this.triggerevent('change', this
.data.value) 
}}});/**
* 自定義元件 線路在列表中的展示 */
component(option)

basecomponentoption 中 預設封裝了:

屬性 entity 對應外部傳遞過來的 物件, 型別 object 
style 用於外部自定義樣式, 預留字段
方法 showdefaultimage 用於預設的處理 
其他: 只要按照 basecomponentoption.init 方式去初始化元件,即可有無限可能
值得注意的是: 元件中定義的 樣式,只在元件內部可用,不會影響到外部
同樣,外部page的樣式也不會干擾到元件
所以,如果需要使用 全域性樣式
需要單獨 require外部css
內部內容
這裡的標籤內內部內容,在元件wxml中使用標籤表示
這裡的封裝暫時很簡單,只有生命週期的封裝, 支援mixins請見官方文件
目前的方案是,元件只負責展示,盡量 不做資料的處理,所有的處理在外部完成,減少技術複雜度,盡快上手

微信小程式元件

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

微信小程式 Tabs元件

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

微信小程式 progress元件

show info在進度條右側顯示百分比 stroke width進度條線的寬度，單位px color進度條顏色 active進度條從左往右的動畫 backgroundcolor未選擇的進度條的顏色 動態設定進度條進度 10 30 50 70 90 page changetabbar e perce...