微信小程序系列（六）：使用组件监听事件过滤数据

上一文章，讲解外部样式类，并初步引入wxs的概念

下面将进行组件的监听事件函数讲解，通过该函数，组件在接收数据后，进行数据的重新构造。

1、创建自定义组件“hot-list”

2、在home.json引入组件

{
  "usingComponents": {
      "s-category-grid":"/components/category-gird/index",
      "s-spu-scroll":"/components/spu-scroll/index",
      "s-hot-list":"/components/hot-list/index"
      
  }
}

3、在home.wxml增加组件代码

<!--pages/home/home.wxml-->
<span>{{WebTitle}}</span>
<view>
    <image class="top-theme" src="{{topTheme.entrance_img}}" ></image>
    <swiper class="swiper"
        indicator-dots="{{true}}"
        indicator-active-color="#157658"
        autoplay="{{true}}"
        circular="{{true}}"
    >
        <block wx:for="{{bannerB.items}}">
            <swiper-item>
                <image class="swiper" src="{{item.img}}"></image>>
            </swiper-item>
        </block>
    </swiper>

    <s-category-grid grid="{{grid}}"></s-category-grid>
    <image class="activityD" src="{{activityD.entrance_img}}"></image>

    <s-spu-scroll 
        m-scroll-class="spu-scroll"
        theme="{{themeE}}"
        spu-list="{{themeESpu}}"
        wx:if="{{topTheme.online}}">
    </s-spu-scroll>

    <image src="{{themeF.entrance_img}}" class="quality"></image>

    <s-hot-list banner="{{bannerG}}"></s-hot-list>
</view>

3、在home.js中绑定“bannerG”

4、在组件“hot-list”中的index.js设置监听事件

// components/hot-list/index.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        banner:Object
    },
    observers:{
        /** 'banner,theme':function(banner,theme) */
        'banner':function(banner){
            if(!banner){
                return;
            }
            if(banner.items.length===0){
                return;
            }
            const leftItem = banner.items.find(b=>b.name==='left');
            const rightTopItem = banner.items.find(b=>b.name==='right-top');
            const rightBottomItem = banner.items.find(b=>b.name==='right-bottom');
            this.setData({
                leftItem,
                rightTopItem,
                rightBottomItem
            })
        }

    },
    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

通过observers函数，把数组直接转换成对应的三个对象，最后在组件的index.wxml文件中直接赋值即可，简单方便。

5、在组件“hot-list”中的index.wxml填写骨架

<view class="container">
    <image class="tittle" src="{{banner.img}}"></image>
    <view class="inner-container">
        <image class="left" src="{{leftItem.img}}"></image>
        <view class="right-container">
            <image class="right-size" src="{{rightTopItem.img}}"></image>
            <image class="right-size" src="{{rightBottomItem.img}}"></image> 
        </view>
    </view>
</view>

6、在组件“hot-list”中添加wxss

/* components/hot-list/index.wxss */

.container{

display:flex;
flex-direction: column;
align-items: center;
padding-top:40rpx;
background-color: #ffffff;
}

.tittle{
    width:690rpx;
    height:90rpx;
}
.inner-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}
.right-container{
    display: flex;
    flex-direction: column;
   
    justify-content: space-between;
}

.left{
    display:flex;
    widows: 346rpx;
    height: 522rpx;

}
.right-size{
    width: 400rpx;
    height:260rpx;
    display: flex;
}

组件监听事件完成。下面将进行讲解小程序的抽象节点。通过抽象节点和lin-ui打造瀑布流