solution-titlebar 轻卡片标题栏
更新时间：2022-12-13
solution-titlebar 轻卡片标题栏
iov-solution-titlebar 轻卡片标题栏组件，iov-ui@1.2.38起支持。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| showback | Boolean | true | 是 | 是否展示返回键 |
| rightIcon | String | 无 | 否 | 右上角展示的icon |
| rightImg | String | 无 | 否 | 右上角展示的图片 |
| rightVoice | String | 无 | 否 | 右上角voice-tag值 |
| bindrighticon | Function | 无 | 否 | 点击右上角icon/图片的回调 |
示例：
json:
{
"navigationBarTitleText": "智慧停车",
"navigationStyle": "",
"usingComponents": {
"iov-titlebar": "../../components/solution-titlebar/index",
"error-page": "../../components/error-page/index",
"iov-layout": "../../components/solution-card-layout/index",
"iov-tabs": "iov-ui/lib/tabs"
},
"window": {
"left": 90,
"top": 88,
"right": 1280,
"bottom": 1040,
"showStyle": 1
}
}swan:
<iov-layout type="normal">
<iov-titlebar slot="titlebar" showback="{{ true }}" bindrighticon="clickIcon" rightIcon="set-democar">
<iov-tabs
slot="filter"
direction="horizontal"
bindtabchange="tabchange"
tabs="{{ tabs }}"
active-name="1"
></iov-tabs>
</iov-titlebar>
<view class="wrap" slot="content">
<error-page
status="{{ status }}"
errImg="https://bce.bdstatic.com/doc/bd-idg-clw-xiaoduzhushou/Paper/nocontent_62514d2.png"
></error-page>
</view>
</iov-layout>js:
Page({
// eslint-disable-line
data: {
tabs: [
{
name: '1',
label: '全部订单'
},
{
name: '2',
label: '待离场'
},
{
name: '3',
label: '已完成'
}
],
loading: false,
status: '7'// 参考error-page组件status取值
},
onInit(query) {},
async onLoad(query) {}
});less:
.wrap {
display: flex;
flex-direction: column;
padding: 0.4rem 1.04rem 0;
width: 100%;
height: 100%;
}
.icon {
.icon {
font-size: 44/100rem;
}
}