bs-ui-title v0.1.1

bs-ui-title

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

功能介绍

• 基础的title功能
• title文字和提示叹号的图标以及more部分支持slot
• 在APP.wxss文件中设置组件的整体样式

使用方法

1. 安装

npm i bs-ui-title

2. .json

"usingComponents": {
    "bs-title": "miniprogram_npm/bs-ui-title/index"
  }

3. .wxml

<!-- 纯标题文字 -->
<bs-title cm-container="title-cont0" title="{{title}}"></bs-title>
<!-- 有标题 有叹号 有查看详情 -->
<bs-title title="标题" more="查看详情" params="{{moreParams}}" bindmoredetails="moreDetails">
    <view slot="title">
        <image class="title-tipIcon" src="/asset/note_icon.png"></image>
    </view>
</bs-title>

4. .js

moreDetails(event) {
    const eventData = event.detail.data;
    //接受组件传回来的参数
}

5. app.wxss

/* <!-- 整体部分的样式 --> */
.sys_bs-title_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    padding: 0 40rpx;
    font-size: 32rpx;
    color: #000;
}

/* <!-- title文字和图标部分 --> */
.sys_bs-title_title {
    display: flex;
    align-items: center;
}

/* <!-- 更多详情部分的样式 --> */
.sys_bs-title_more {
    font-size: 24rpx;
    color: #999;
    display: flex;
    align-items: center;
    height: 50rpx;
    padding-left: 50rpx;
}

/* <!-- 更多详情中右箭头的样式 --> */
.sys_bs-title_moreArrow {
    width: 11rpx;
    height: 12px;
    margin-left: 10rpx;
}

接口说明

Properties

自定义样式