微信小程序基础——组件
properties
外部给组件传递的值
//组件x-segmentBar.js文件
Component({
properties:{//定义属性
//第一种方式
//segmentItems:Array//属性为数组类型
//第二种方式
segmentItems:{
type:Array,
value:[]//默认值
}
},
//...
})
Data
组件自己内部使用的数据
//x-segmentBar.js
Component({
//...
data:{//组件内部使用的数据
currentIndex:0
},
//...
})
method
组件内部的方法
//x-segmentBar.js
Component({
//...
//...
methods:{
_handlerTap:function(evt){
let cid=evt.currentTarget.id;
this.setData({
currentIndex:cid
})
//触发一个自定义事件,并且把数据传递出去
this.triggerEvent("selectChange",{currentIdx:cid},{})//1.事件名称 2.要传出的数据 3.事件相关选项,这里为空
//segmentItem被点,之后_handlerTap被触发,然后再触发上面自定义事件,返回一些数据
}
}
})
组件框架定义
<!-- x-segment.wxml -->
<view class="segmentBar">
<block wx:for="{{segmentItems}}" wx:key="index"><!--组件的wxml绑定的是组件的properties,最终外部使用的时候要给segmentItems这个属性传值-->
<view id="{{index}}" class="segmentItem {{currentIndex == index ? 'active' : ''}}" bindtap="_handlerTap"><!--1.被选中的class加上'active' 2.这个被tap后,触发组件的method(方法)_handlerTap -->
<text class="title">{{item.title}}</text>
<text class="subTitle">{{item.subTitle}}</text>
</view>
<block>
</view>
组件样式定义
/* x-segment.wxss */
.segmentBar{
width:100%;
height:100rpx;
border-bottom:1px solid #ccc
display:flex;/*默认flex-direction:row*/
}
.segmentItem{
flex:1;/*1,所有flex的元素相同宽度*/
text-align:center;/*文字居中*/
display:flex;
flex-direction:column;
justify-content:center;/*内容垂直居中*/
}
.segmentItem .title{
font-size:30rpx;
color:#666;
}
.segmentItem .subTitle{
font-size:26rpx;
color:#999;
}
使用组件
//customWidgetDemo.wxml使用x-segmentBar组件
<x-segmentBar segmentItems="{{items}}" bind:selectChange="handlerSelectChange"></x-segmentBar>
//直接写 properties="value"
//使用x-segmentBar组件的页面 customWidgetDemo.js
Page({
data:{
items:[{
title:"热门榜",
subTitle:"本周最佳"
},
{
title:"新晋榜",
subTitle:"本周上新"
},
{
title:"潜力榜",
subTitle:"本周最快"
},
{
title:"收藏榜",
subTitle:"本周最多"
}]
},
//当组件x-segmentBar的selectChange方法执行了话,就触发此函数
handlerSelectChange:function(evt){//evt为selectChange发出的数据
console.log(evt);
}
})