titlebar

更新时间：2021-11-10

iov-titlebar 标题栏

标题栏

属性说明：

属性名	类型	默认值	必填	说明
title	String	无	是	展示标题内容
class-name	String	无	否	自定义 class
showback	Boolean	false	否	是否现实返回按钮
search	Boolean	false	否	展示搜索
city	String	无	否	展示城市信息
showAccount	Boolean	false	否	是否展示头像
isLogin	Boolean	false	否	是否已登录
portraitUrl	String	无	否	已登录标题栏头像
bindback	EventHandle	无	否	点击返回按钮的回调, 自定义返回事件
bindsearch	EventHandle	无	否	点击搜索按钮的回调
bindcity	EventHandle	无	否	点击城市的回调
bindaccount	EventHandle	无	否	点击头像的回调
searchVoiceTag	String	无	否	搜索语音指令
cityVoiceTag	String	无	否	城市语音指令
imgVoiceTag	String	无	否	头像语音指令
customBack	Boolean	false	否	是否自定义返回事件（已废弃）
bindmore	EventHandle	无	否	点击更多回调（已废弃）

slots：

slotname	说明
title	标题组件（已废弃）

示例：

json:

{
    "navigationBarTitleText": "智能小程序官方组件",
    "usingComponents": {
        "iov-titlebar": "iov-ui/lib/titlebar"
    }
}

swan:

<iov-titlebar
        title="最长十一"
        class="item"
        city="{{city}}"
        showback="{{true}}"
        bindback="bindback"
        bindcity="bindcity"
        search="{{search}}"
        bindsearch="bindsearch"
        showAccount
        isLogin="{{isLogin}}"
        portraitUrl="https://img.yzcdn.cn/vant/cat.jpeg"
        bindaccount="bindaccount"
    />

js:

Page({
    data: {
        city: '最长十一个字显示省略号',
        search: false,
        isLogin: false
    },
    onShow() {
        console.log('isLogin show', this.data.isLogin);
    },
    bindback(e) {
        console.log('点击了返回', e);
    },
    bindaccount(e) {
        this.setData({
            isLogin: !this.data.isLogin
        });
        console.log('点击了头像', e, this.data.isLogin);
    },
    bindsearch(e) {
        console.log('点击了搜索', e);
    },
    bindcity(e) {
        console.log('点击了城市', e);
    },
    btnAction1() {
        this.setData({
            city: '深圳'
        });
    },
    btnAction2() {
        this.setData({
            city: '北京'
        });
    }
 });

textfield 输入框 TreeSelect 分类选择