網(wǎng)上一直再埋怨小程序沒有組件化,現(xiàn)在小程序升級了,提供了自定義組件 Component,目前處于公測階段。今天體驗一回,將之前使用 template 寫的評分組件重寫了下。
小程序自定義評分組件 template(精度0.1)
從小程序基礎(chǔ)庫版本 1.6.3 開始,小程序支持簡潔的組件化編程。
自定義組件
自定義組件類似頁面,由 json wxml wxss js 4個文件組成。
1、rating.json
必需在 json 文件中聲明為組件
-
{
-
"component": true
-
}
2、rating.wxml wxml 文件中編寫布局
-
class='com-rating'>
-
class='rating-icon' wx:for='{{[1,2,3,4,5]}}' wx:key='*this'
-
bindtap='_handleTap' data-num='{{item}}'>
-
class='rating-on' style='width:{{rating >= (max/5)*item ? 1 : rating < (max/5)*(item-1) ? 0 : (rating*10)%(max/5*10)/(max/5*10)}}em'>
-
src='./../../images/rating_on_icon.png' mode='widthFix' style='width:1em' />
-
-
class='rating-off' style='width:1em;'>
-
src='./../../images/rating_off_icon.png' mode='widthFix' style='width:1em' />
-
-
-
3、rating.wxss 修飾組件樣式
-
.com-rating {
-
display: inline-block;
-
letter-spacing: .3em;
-
position: relative;
-
}
-
.com-rating .rating-icon,
-
.com-rating .rating-on,
-
.com-rating .rating-off {
-
display: inline-block;
-
}
-
.com-rating .rating-icon:not(:last-child) {
-
margin-right: .2em;
-
}
-
.com-rating .rating-on {
-
color: black;
-
position: absolute;
-
overflow: hidden;
-
padding: 0;
-
margin: 0;
-
}
-
.com-rating .rating-off {
-
color: #DBDBDB;
-
padding: 0;
-
margin: 0;
-
}
4、rating.js 初始化組件屬性及事件
-
Component({
-
// 聲明組件屬性及默認(rèn)值
-
properties: {
-
rating: {
-
type: Number, // 必需 指定屬性類型 [String, Number, Boolean, Object, Array, null(任意類型)]
-
value: 10
-
},
-
max: {
-
type: Number,
-
value: 5
-
},
-
disabled: {
-
type: Boolean,
-
value: false
-
}
-
},
-
-
// 組件私有和公開的方法,組件所使用的方法需在此聲明
-
methods: {
-
_handleTap: function (e) {
-
if (this.data.disabled) return;
-
const { max } = this.data;
-
const { num } = e.currentTarget.dataset;
-
this.setData({
-
rating: max / 5 * num
-
})
-
// 自定義組件事件
-
this.triggerEvent('change', { value: max / 5 * num }, e);
-
}
-
}
-
-
})
使用
組件除了在 page 中使用外,在組件中也可以使用。以 page 舉例。
1.json 在 json 文件中需聲明組件
-
{
-
"usingComponents": {
-
"com-rating": "/components/rating/rating"
-
}
-
}
2.wxml
-
-
max="10" rating='6.5' bindchange='handleChange' />
3.js 在 js 文件中監(jiān)聽事件
-
/**
-
*@param {Object} e 組件自定義事件傳遞的數(shù)據(jù)
-
*/
-
handleChange: function(e) {
-
this.setData({
-
rating: e.detail.value
-
})
|