一、创建组件
1、新建组件文件
在components文件夹下新建目录select,创建select下拉选项卡组件
2、自定义组件样式及js
①select.wxml文件
继承样式,如 font 、 color ,会从组件外继承到组件内。
除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
③selece.js
Component({
/*组件配置选项*/
options: {
addGlobalClass: true,//这个选项等价于设置 styleIsolation: apply-shared
styleIsolation: 'isolated'
/*
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)*/
},
// 组件的属性列表
properties: {
// 页面传入组件的数据
propArray: {
type: Array,
},
nowText: {
type: null,
}
},
// 组件的初始数据
data: {
selectShow: false, //初始option不显示
},
//监听字段语法
observers: {
'some.subfield': function(subfield) {
// 使用 setData 设置 this.data.some.subfield 时触发
// (除此以外,使用 setData 设置 this.data.some 也会触发)
subfield === this.data.some.subfield
},
'arr[12]': function(arr12) {
// 使用 setData 设置 this.data.arr[12] 时触发
// (除此以外,使用 setData 设置 this.data.arr 也会触发)
arr12 === this.data.arr[12]
},
}
// 组件声明周期
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
this.setData({
firstText: this.properties.nowText,//将获取到的初始值存储起来
});
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 组件的方法列表
/*组建间通信
1. 事件:用于子组件向父组件传递数据,可以传递任意数据。
2.父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
*/
methods: {
// 1. 以事件的形式向父组件 传值
onTap: function(){
this.triggerEvent('customevent', {}) //同vue 组件间传值时一致的
}
}
})
二、使用组件
1、引入组件
在使用组件页面的json文件中配置
"usingComponents": {
"select": "/components/select/select"
}
tips: 注意路径是否正确, / 单斜杠表示根目录,是绝对路径。
2、页面使用组件
<view class="top">
<select prop-array='{{timeArray}}' now-text='{{invetime}}'></select>
<select prop-array='{{termArray}}' now-text='{{term}}'></select>
<select prop-array='{{moneybackArray}}' now-text='{{moneyback}}'></select>
</view>
tips: prop-array为自定义的属性名,和组件所在的 js 中properties中的属性是对应的。
在 properties 定义的属性中,属性名采用驼峰写法(例如:propArray)。
在引入组件的 wxml 中,指定属性值时则对应使用连字符写法(例如:prop-array=”…”)。
3、传入组件所需数据
在引用组件页面的.js文件中的data中传入数据
data: {
invetime: '投资时间',
term: '标的期限',
moneyback: '是否回款',
timeArray: [{
"id": "0",
"text": "全部"
}, {
"id": "1",
"text": "3个月内"
}, {
"id": "2",
"text": "6个月内"
}, {
"id": "3",
"text": "12个月内"
}]
}