小程序自定义组件

自定义组件我把它分为简单的三个步骤
1.创建组件 --- 2.编写组件 --- 3.调用,使用组件.

1. 创建组件:创建一个list(该文件夹就是自定义组件带的)文件夹,里面包含 josn.wxml.wcss.js 四个文件,然后在josn里面添加 "component":true (作用是声明这一组文件为自定义组件) 1524638525(1).jpg

2. 编写组件代码

   在list.wxml

       <view class="list-wrap flex flex-align-center flex-pack-justify">
           <view class="flex flex-align-center">
               <image src="{{url}}" class="list-img"/>
               <view>
                   < view>{{name}}<view/>
                   < view>{{type}} </view>
           </view>
            <view class="center">
                       <view class="attion" catchtap="_attention" wx:if="{{!isAttention}}" >关注</view>
                        <view class="attion" catchtap="_attention" wx:if="{{isAttention}}" 
                                    data-isAttention="isAttention" data-index="index">取消关注</view>
                          <view class="number">{{number}}</view>
           </view>
       </view>
   
   

在list.wxss中都是css样式了,就不贴代码了
在list.js中:

    Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    properties:{
        name:{
            type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array,         
                null（表示任意类型）
            value: ''
        },
        type:{
            type:String,
            value: ''
        },
        number:{
            type:String,
            value:''
        },
        url:{
            type:String,
            value:''
        },
        idinfo:{
            type:String,
            value:''
        },
        isAttention:{
            type:Boolean,
            value:''
        }

    },
    // 这里是一些组件内部数据  
    methods:{
        _attention:function () {
            var myEventDetail = {}; // detail对象，提供给事件监听函数
            var myEventOption = {}; // 触发事件的选项
            this.triggerEvent('attention', myEventDetail, myEventOption)
        }
    }
});

第三步, 使用组件
这里我是在 pages/index/index 页面调用 component/list/list自定义组件
首先在index.json中进行引用说明, 这里是设置自定义组件的标签名和引用路径

  "usingComponents": {
    "list":"/components/list/list"
  }

然后在index.wxml调用组件

    <list id="list" bind:attention="_attention"
              wx:for="{{lists}}" wx:key="id"
              name="{{item.name}}"
              url="{{item.url}}"
              type="{{item.type}}"
              number="{{item.number}}"
              idinfo="{{item.id}}"
              isAttention="{{item.isAttention}}"
              data-isAttention="{{item.isAttention}}" data-index="{{index}}"
        ></list>

在index.js绑定数据,

    // 生命周期函数--监听页面初次渲染完成
    onReady: function () {
        //获得list组件
        this.list = this.selectComponent("#list");
    },
    /*关注和取消关注*/
    _attention(event){
        let that = this, isAttention = event.currentTarget.dataset.isattention, index = event.currentTarget.dataset.index;
        let boo = "lists[" + index + "].isAttention";
        if (isAttention) {
            that.setData({
                [boo]: false
            })
        } else {
            that.setData({
                [boo]: true
            })
        }
    },