bilibili小程序

使用小贴士

cover-view

基础库 3.27.0 开始支持，低版本需做兼容处理。

该组件为原生组件，可以覆盖在原生组件之上的视图。

可覆盖的原生组件包括 video、canvas。

只支持嵌套 cover-view、cover-image、cover-input、cover-textarea、cover-label、cover-button、cover-svga。

属性类型默认值说明版本
animation
string
""
执行动画的id（animation）
3.34.0
zIndexnumber原生组件的层级（cover-view组件之间）3.32.0
clickeventhandle用户点击触发3.27.0
touchstarteventhandle手指触摸动作开始3.27.0
touchmoveeventhandle手指触摸后移动3.27.0
touchendeventhandle手指触摸动作结束3.27.0
touchcanceleventhandle手指触摸动作被打断，如来电提醒，弹窗3.27.0

写法规则

template模板写法

  • 只能使用小程序提供的所有 cover-* 相关组件，其他标签将会忽略。
  • 组件里不能嵌套使用 vue component 组件。
<!-- vue component testCom -->
<template>
    <div>testCom</div>
</template>

<!-- cover-view组件 -->
<template>
    <cover-view>
        <!--这样的写法是不支持的-->
        <!--<custom-comp></custom-comp>-->
        <cover-view class="coverView-width">
            <cover-label>第一个元素</cover-label>
        </cover-view>
    </cover-view>
</template>
  • cover-* 所有组件都支持touch事件和click事件。

样式写法

  • style解析除了正常style写法外，还支持less。
<style scoped></style>
<style lang="less" scoped></style>
  • class规则只支持单class写法，其他写法将会被忽略。
<style scoped>
    .cover-view-width { ... }
    .cover-view-style { ... }
</style>
  • cover-view 样式只支持从当前文件读取，不支持全局和外部挂载。
<template>
    <cover-view>
        <cover-view class="cover-view-width cover-view-one">
            <cover-label>第一个元素</cover-label>
        </cover-view>
    </cover-view>
</template>

<script>
    export default {
        data() {
            return {};
        }
    };
</script>

<style lang="less">
    /* 这样是不支持的 */
    /* @import "index.css"; */
    .cover-view-one { ... }
    .cover-view-width { ... }
</style>

样式支持

通用样式

  • 默认使用 Flexbox 布局，不支持其他布局。
  • 支持 CSS Box Model。
  • position支持: relative | absolute， 根节点 cover-view 支持设置 fixed。
  • 边框样式，不支持单边、只支持 solid。
  • 其他基本样式：background-color。
  • overflow样式，支持visible 、hidden，默认值/异常值为：hidden。
    • 基础库 3.34.0 开始支持，之前版本默认行为是 overflow: hidden，即使设置 visible 也不生效
    • hidden：当子节点大小超出父节点大小时，裁剪超出部分（不显示超出部分，并非改变子节点大小）
    • visible: 当子节点大小超出父节点大小时，正常显示超出部分，超出父节点部分正常响应触摸事件
  • CSS Transform 和 CSS Transition 不支持。

文本样式

  • color：文字颜色。
    • RGB（ rgb(255, 0, 0) ）
    • RGBA（ rgba(255, 0, 0, 0.5) ）
    • 十六进制（ #ff0000 ）；精简写法的十六进制（ #f00 ）
    • 色值关键字（ red ）
  • font-size：文字大小，不支持 vw、vh 单位。
  • font-style：字体类别。可选值 normal | italic，默认为 normal。
  • font-weight：字体粗细程度。
    • 可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900。
    • normal 等同于 400, bold 等同于 700。
    • 默认值: normal。
    • iOS 支持 9 种 font-weight 值；Android只有在 Android p 以上才生效。
    • 类似 lighter, bolder 这样的值暂时不支持。
  • text-decoration：字体装饰，可选值 none | underline | line-through，默认值为 none。
  • text-align：对齐方式。可选值 left | center | right，默认值为 left。
  • text-overflow：设置内容超长时的省略样式。可选值 clip | ellipsis， Android仅支持ellipsis。
  • line-height：正整数，每行文字高度。line-height 是 top 至 bottom 的距离，Android不支持。
  • word-wrap：break-word | normal。
  • white-space: normal | nowrap。

支持样式清单

margin、padding、border、direction、flex-direction、justify-content、align-content、align-items、align-self、flex-wrap、display、position、flex、flex-grow、flex-shrink、flex-basis、left、top、right、bottom、margin-left、margin-top、margin-right、margin-bottom、padding-left、padding-top、padding-right、padding-bottom、width、height、min-width、min-weight、max-width、max-height、border-width、border-radius、border-color、border-style、text-align、font-size、font-style、text-overflow、font-weight、color、background-color、line-height、text-decoration、overflow、white-space、font-family、opacity、word-wrap。

注意：border只支持这种写法 border: 1px solid red;。

CSS 单位

长度单位

  • px、vw、vh

tips

  1. font 不支持 vw、vh 单位。

数值单位

  • 仅仅一个数值，后面没有 px 等单位。用于flex 等属性指定一个纯数值。
  • vw、vh仅支持 padding、margin、width、height、min-width、max-width、min-height、max-height、left、top、right、bottom、flexBasic。

颜色单位

支持多种颜色单位：

  • 精简写法的十六进制，如 #f00。
  • 十六进制，如 #ff0000。
  • RGB， 如 rgb(255, 0, 0)。
  • RGBA，如 rgba(255, 0, 0, 0.5)。
  • 色值关键字，如 red。
Color NameHex rgb
black#000000
silver#C0C0C0
gray#808080
white#FFFFFF
maroon#800000
red#FF0000
purple#800080
fuchsia#FF00FF
green#008000
lime#00FF00
olive#808000
yellow#FFFF00
navy#000080
blue#0000FF
teal#008080
aqua#00FFFF

默认样式

.bl___cover-view {
  display: flex;
  box-sizing: border-box;
  line-height: 1.2;
  overflow: hidden;
}

示例代码

<template>
    <cover-view class="coverView-top">
        <cover-view class="coverView-width coverView-one">
            <cover-label>第一个元素</cover-label>
        </cover-view>
        <cover-view class="coverView-width coverView-two">
            <cover-label>第二个元素</cover-label>
        </cover-view>
        <cover-view class="coverView-width coverView-three">
            <cover-label>第三个元素</cover-label>
        </cover-view>
        <cover-view class="coverView-width coverView-four">
            <cover-button class="coverView-button" @click="testMethod" style="">按钮</cover-button>
        </cover-view>
        <cover-view class="coverView-width coverView-five">
            <cover-image src="static/tabBar/icon_API_HL.png" class="coverView-full" @load="testMethod"></cover-image>
        </cover-view>
    </cover-view>
</template>
<script>
    export default {
        data() {
            return {
            };
        },
        methods: {
            testMethod(e) {
                console.log('-----触发event-----', e);
            }
        }
    };
</script>
<style lang="less">

    .coverView-top {
        display: flex;
        border: 1px solid red;
        height: 400px;
    }

    .coverView-width{
        height: 80px;
        width: 80px;
    }

    .coverView-full{
        height: 100%;
        width: 100%;
    }

    .coverView-one {
        border: 1px solid rebeccapurple;
    }

    .coverView-two {
        border: 1px solid darkblue;
    }

    .coverView-three {
        border: 1px solid gold;
    }

    .coverView-four {
        border: 1px solid seagreen;
    }

    .coverView-five {
        border: 1px solid darkorange;
    }
</style>

Bug & Tip

  1. tip: cover-view根节点自适应宽度，需要把width/height 设置为auto，设置了 width: auto，会不受父节点的宽度限制。
← swipercover-image →