在小程序中的公共模板和自定义组件,感觉自定义组件比较好用、顺手。
组件页面的写法和一般页面一样。
基本语法
Component 用于定义组件,指定组件的属性、数据和方法。代码:
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
data:"duxin"
},
/**
* 组件的方法列表
*/
methods: {
}
})
定义一个计数器组件来理解小程序的自定组件:
组件的wxml
<!-- 主容器 -->
<view class="stepper" bindtap="step">
<!-- 减号 -->
<text class="{{minusStatus}}" bindtap="bindMinus">-</text>
<!-- 数值 -->
<input type="number" bindchange="bindManual" value="{{num}}" />
<!-- 加号 -->
<text class="normal" bindtap="bindPlus">+</text>
<view class="value" bindtap="sendMesgToFather">给父组件传值</view>
</view>
组件的样式wxss
/* component/stepper/stepper.wxss */
/*全局样式*/
page {
padding: 20px 0;
}
/*主容器*/
.stepper {
width: 350px;
height: 26px;
/*给主容器设一个边框*/
border: 1px solid red;
border-radius: 3px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
/*加号和减号*/
.stepper text {
width: 50px;
line-height: 26px;
text-align: center;
}
/*数值*/
.stepper input {
width: 100px;
height: 26px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
/*给中间的input设置左右边框即可*/
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/*普通样式*/
.stepper .normal {
color: black;
}
/*禁用样式*/
.stepper .disabled {
color: #ccc;
}
.value {
width: 150px;
}
组件的js:
// pages/Components/stepper/stepper.js
Component({
/**
* 组件的属性列表
*/
properties: {
num: Number // 父组件传递的参数
},
/**
* 组件的初始数据
*/
data: {
// num: 0,
minusStatus: ''
},
/**
* 组件的方法列表
*/
methods: {
step() {
var myEventDetail = {
name: "duxin",
num: this.data.num
} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
},
bindMinus() {
var num = this.data.num;
if (num > 0) {
num--;
}
var minusStatus = num <= 0 ? "disabled" : "normal";
this.setData({
minusStatus: minusStatus,
num: num
})
},
bindPlus() {
var num = this.data.num;
num++;
var minusStatus = num <= 0 ? "disabled" : "normal";
this.setData({
num: num,
minusStatus: minusStatus
})
},
sendMesgToFather() {
// 向父组件发送值
let step = 2;
this.triggerEvent('realNameConfirm', step)
}
}
})
在页面中引入组件:
在页面的json文件中引入组件:
{
"usingComponents": {
"stepper":"../Components/stepper/stepper"
}
}
<stepper num="10"></stepper>
当页面向组件传值的时候,直接在组件设置相应的属性和属性值即可。如果页面接收组件传递过来的参数呢?那就在页面使用组件的时候直接绑定对应的函数来接收参数,代码如下:
<stepper num="10" bind:realNameConfirm="realNameConfirm"></stepper>
页面js:
// 接收组件传递过来的参数
realNameConfirm(e) {
console.log(e)
this.setData({
value:e.detail
})
},
文章评论