阅读 24

简介小程序自定义组件

自定义Component

styleIsolation

当我们在使用组件的页面编写自定义组件的样式无效时,我们可以使用styleIsolation属性的shared值

Page({
    options: {
     styleIsolation: 'shared'
    },
})
复制代码
组件样式的限制
  1. 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
  2. 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
  3. 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  4. 继承样式,如 font 、 color ,会从组件外继承到组件内。
  5. 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
复制代码
externalClasses

自定义组件中怎么使用外部样式

Page({
  externalClasses: ['tag-class'],
})
复制代码

wxml文件

  <view class="tag-class"></view>
复制代码

page页面

  <v-tag tag-class="custom-class"></v-tag>
复制代码

page页面的wxss

.custom-class {
  color:red
}
复制代码
slot插槽

如果要使用具名slot,必须设置multipleSlots为true

Component({
复制代码

options: { multipleSlots: false, // 设置slot }, })

wxml文件
复制代码
```
Behavior

behaviors是用于组件间代码共享的特性, 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ,behavior 也可以引用其它 Behavior

// behavior.js
module.exports = Behavior({
    behaviors: [],
    properties: {
      count: {
        type: Number
      }
    },
    methods: {
        getCount: function() {
            console.log(this.count)
        }
    }
})
复制代码

组件中使用

const commonBehavior = require("../behavior.js");
Component({
    ...
    behaviors: [commonBehavior],
    ...
})
复制代码

wxml文件

// v-tag组件中使用
<view>
  <text bindtap = "getCount">总数:{{ count }}</text>
  <slot></slot>
</view>

复制代码
triggerEvent

触发自定义事件,类似emit wxml文件

// page页面
<v-tag bindmyevent="handleMyEvent">
</v-tag>
复制代码
 handleEvent(detail) {
   console.log(detail)
 }
复制代码

组件的js文件

// 自动触发myevent事件
   this.triggerEvent('myevent', {data: 233})
复制代码
wxss文件中使用background-image无效

在wxss中是无法引用本地包文件中存放的图片的 background-image只支持线上图片和base64图片

// 方案一,使用网络图片
<view class="banner-img"></view>
.banner-img {
  height: 200rpx;
  width: 100%;
  background-size: cover;
  background-image: url(https://test-pulick.oss-cn-beijing.aliyuncs.com/data/1508923002430.png);
}

// 方案二,使用base64,
// 方案三,使用style属性
<view style="background-image: url(../../images/bg1.png);width: 200rpx;height: 200rpx;"></view>

// 方案四,使用image标签,设置z-index属性

复制代码