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

| Property | Type | Required | Default Value | Comments | |------------ |------- |---------- |------------------------ |------------------------------------ | | title | String | required | --- | 标题的文字内容 | | more | String | required | ---- | 查看更多的文字 | | more-type | String | --- | arrow | 如果设置该属性的值不为arrow则不显示默认的查看详情部分 | | params | Object | optional | -- | 更多内容方法所需的参数(组件传给title的参数需要传给page) | | bindmoredetails| function | -- | -- | 更多内容的方法 |

自定义样式

| Class Name | Comments | |------------|---------------------| | cm-container | 最外层view的className | | cm-title | 标题文字view的className(不常用) | | cm-more | 更多详情view的className | | cm-moreArrow | 更多图标的className (不常用) |