bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsB/tabbar/tabbar.nvue
+274
View File
@@ -0,0 +1,274 @@
<template>
<view class="u-page">
<view class="u-page__item">
<text class="u-page__item__title">基础功能</text>
<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>
</view>
<view class="u-page__item">
<text class="u-page__item__title">显示徽标</text>
<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>
</view>
<view class="u-page__item">
<text class="u-page__item__title">匹配标签的名称</text>
<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>
</view>
<view class="u-page__item">
<text class="u-page__item__title">自定义图标/颜色</text>
<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>
</view>
<view class="u-page__item">
<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
<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>
</view>
<view class="u-page__item">
<text class="u-page__item__title">去除上边框</text>
<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>
</view>
<view class="u-page__item">
<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
<u-gap height="150"></u-gap>
<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>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 1,
value3: 'play-right',
value4: 0,
value5: 0,
value6: 0,
value7: 3
}
},
onLoad() {
},
methods: {
change5(name) {
if (name === 1) return uni.$u.toast('请您先登录')
else this.value5 = name
},
change1(e) {
this.value1 = e
console.log('change1', e);
},
click1(e) {
console.log('click1', e);
}
},
}
</script>
<style lang="scss">
.u-page {
padding: 0;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
&__slot-icon {
width: 17px;
height: 17px;
}
}
}
</style>