微信小程序基础——组件——小例子

微信小程序基础——组件

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);
    }
})