uView Tabbar 底部导航栏
2024-01-07 17:37:43
优点:
此组件提供了自定义tabbar的能力,具有如下特点:
- 图标可以使用字体图标(内置图标和扩展图标)或者图片
- 可以动态切换菜单的数量以及配置
- 切换菜单之前,可以进行回调鉴权
- 可以设置角标或数字化提示
- 有效防止组件区域高度塌陷,无需给父元素额外的内边距或者外边距来避开导航的区域
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
#基本使用
推荐您使用list数组遍历循环,案例使用基础方式构建,请根据click
事件回调进行后续逻辑操作。
<u-tabbar
:value="value1"
@change="change1"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" @click="click1" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" @click="click1" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" @click="click1" ></u-tabbar-item>
</u-tabbar>
<!-- js -->
value1: 0,
click1(e) {
console.log('click1', e);
}
copy
#显示徽标
使用dot
属性添加--小点--类型徽标,使用badge
属性添加--数字--类型徽标。您也可以使用:badge='badge'
动态设置徽标数量, 这在消息盒子的展示中是比较好用的功能,
<u-tabbar
:value="value2"
:placeholder="false"
@change="name => value2 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value2: 1,
copy
#匹配标签的名称
<u-tabbar
:placeholder="false"
:value="value3"
@change="name => value3 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" name="photo" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" name="play-right"></u-tabbar-item>
<u-tabbar-item text="我的" name="account" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value3: 'play-right',
copy
#自定义图标/颜色
如您需要自定义图标/颜色,在u-tabbar-item
标签中使用插槽active-icon
和inactive-icon
来定义图标和颜色
<u-tabbar
:value="value4"
@change="name => value4 = name"
:fixed="false"
:placeholder="false"
activeColor="#d81e06"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页">
<image
class="u-page__item__slot-icon"
slot="active-icon"
src="https://cdn.uviewui.com/uview/common/bell-selected.png"
></image>
<image
class="u-page__item__slot-icon"
slot="inactive-icon"
src="https://cdn.uviewui.com/uview/common/bell.png"
></image>
</u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value4: 0,
copy
#拦截切换事件(点击第二个标签)
在切换事件中,处理拦截事件或者您其他js操作逻辑。
<u-tabbar
:value="value5"
:fixed="false"
@change="change5"
:safeAreaInsetBottom="false"
:placeholder="false"
>
<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value5: 0,
<!-- js -->
change5(name) {
if (name === 1) return uni.$u.toast('请您先登录')
else this.value5 = name
},
copy
#边框
组件默认带了顶部边框,如果不需要,配置border
为false
即可。
<u-tabbar
:value="value7"
:placeholder="false"
:border="false"
@change="name => value7 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value7: 3
copy
#固定在底部(固定在屏幕最下方)
与原生效果无异,但您可以按照api配置您需要的其他配置,如徽标,边框等
<u-tabbar
:value="value6"
@change="name => value6 = name"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value6: 0,
文章来源:https://blog.csdn.net/m0_72196169/article/details/135430615
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!