• 使用npm库
• 自定义组件
• 默认插槽
• 页面参数传递
• 组件不能作为flex项目
• 轮播图
• border-radius不生效
• bindtap和catchtap

使用npm库

1、生成package.json文件

2、安装vantui

npm i @vant/weapp

!

3、构建npm

4、使用组件

index.json配置vant组件

5、页面使用组件

自定义组件

新建组件

生成4个文件

使用自定义组件

1、在需要引用页面的index.json配置

2、页面使用此组件，该区域即显示area-header中的内容。

自定义组件传值

父传子

在自定义组件中声明prop

页面中传递props

子传父

子组件

父组件

直接给子组件监听事件

默认插槽

微信小程序不支持给插槽默认值，如<slot><div>hello</div></slot>hello将永远不能生效，可以使用如下写法：

使用css控制

/*slot类为空时default类显示*/
.header .slot:empty + .default {
  display: flex;
}

/*default默认不显示*/
.header .default {
  display: none;
  align-items: center;
  font-size: 28rpx;
  color: #777;
}

页面参数传递

navigate跳转页面，onload钩子拿参数

组件作为flex项目

组件作为flex项目会有问题，可以包一层view：

轮播图

摸拟数据

[ { bannerId: "1660050051490872", pic: "http://p1.music.126.net/dTP-uxgSYqx_9n2hQQWfww==/109951167764297561.jpg"}, 
 {bannerId: "1660053622001270", pic: "http://p1.music.126.net/W1JSNM9V_3Fn1__MIxHIGQ==/109951167764483820.jpg"} ]

样式

<swiper class="swiper"
      indicator-dots
      autoplay
      circular
      style="height: {{swiperHeight}}px;"
      >
  <block wx:for="{{banners}}" wx:key="bannerId">
    <swiper-item class="swiper-item">
      <image class="swiper-image" 
            src="{{item.pic}}" 
            mode="widthFix"
            bindload="handleSwiperImageLoaded"></image>
    </swiper-item>
  </block>
</swiper>

swiperHeight动态计算第一张图片高度设置给轮播图组件

handleSwiperImageLoaded: function() {
  // 获取图片的高度(如何去获取某一个组件的高度)
  queryRect(".swiper-image").then(res => {
    const rect = res[0]
    this.setData({ swiperHeight: rect.height })
  })
}

queryRect，使用时可以用节流函数包裹

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

export default function (selector) {
  return new Promise((resolve) => {
    const query = wx.createSelectorQuery()
    query.select(selector).boundingClientRect()
    // query.exec(resolve)
    query.exec((res) => {
      // res有dom宽高和位置信息
      resolve(res)
    })
  })
}

border-radius不生效

加上css属性:

transform：translateY(0)

bindtap和catchtap

bindtap：事件会冒泡；
catchtap：事件不冒泡。

bindtap="onBindtap"
catchtap="onCatchTap"