linrk/senlan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

森蓝小程序

Browse Source
This commit is contained in:
linrk
2025-04-23 19:50:30 +08:00
parent 7776447ce3
commit 5205361ac0
111 changed files with 20504 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
components/customTabBar/customTabBar.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<view class="tabBar">
<view class="cont">
<view class="image-text_1 flex-col" @tap="switchTab(list[0].pagePath)">
<image
class="thumbnail_1"
referrerpolicy="no-referrer"
:src="selected == 0? list[0].selectedIconPath:list[0].iconPath"
/>
<text :class="selected == 0?'text-group_1':'text-group_2'">
{{list[0].text}}
</text>
</view>
<!-- <image
class="label_1"
referrerpolicy="no-referrer"
src="https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/icon_camera%403x.png"
@tap="jumpVlog"
/> -->
<view class="image-text_2 flex-col" @tap="switchTab(list[1].pagePath)">
<image
class="thumbnail_2"
referrerpolicy="no-referrer"
:src="selected == 1? list[1].selectedIconPath:list[1].iconPath"
/>
<text :class="selected == 1?'text-group_3':'text-group_4'">
{{list[1].text}}
</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
selected: Number
},
data() {
return {
list: [
{
pagePath: "/pages/home/home",
text: "首页",
iconPath: "/static/icon/icon_Home_n@3x_da.png",
selectedIconPath: "/static/icon/icon_Home_n@3x_a.png",
},
{
pagePath: "/pages/mine/mine",
text: "我的",
iconPath: "/static/icon/icon_我的_n@3x_da.png",
selectedIconPath: "/static/icon/icon_我的_n@3x_a.png",
}
]
}
},
methods: {
switchTab(url) {
uni.switchTab({
url
})
}
}
}
</script>
<style lang="scss">
.tabBar {
z-index: 100;
width: 100%;
position: fixed;
bottom: 0;
font-size: 28rpx;
background-color: #fff;
color: #636363;
left: 0;
height: 150rpx;
background: none;
}
.cont {
z-index: 0;
height: 130rpx;
margin-top: 30rpx;
display: flex;
justify-content: space-around;
.image-text_1 {
margin-top: 5px;
margin-right: 50px;
}
.thumbnail_1 {
width: 18px;
height: 18px;
align-self: center;
}
.text-group_1 {
overflow-wrap: break-word;
color: rgba(22, 140, 248, 1);
font-size: 12px;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 12px;
margin-top: 9px;
}
.text-group_2 {
overflow-wrap: break-word;
color: rgba(80, 92, 115, 1);
font-size: 12px;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 12px;
margin-top: 9px;
}
.label_1 {
width: 43px;
height: 42px;
margin-bottom: 2px;
}
.image-text_2 {
margin-top: 5px;
margin-left: 50px;
}
.thumbnail_2 {
width: 18px;
height: 18px;
align-self: center;
}
.text-group_3 {
overflow-wrap: break-word;
color: rgba(22, 140, 248, 1);
font-size: 12px;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 12px;
margin-top: 9px;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(80, 92, 115, 1);
font-size: 12px;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 12px;
margin-top: 9px;
}
}
</style>