uniapp-微信小程序自定义底部
最近项目遇到需要自定义底部tabbar的,本来随手写了个组件丢给前端,没想到出现了跳转页面闪一下的情况。于是我决定重构一下。大体思路就是把tabbar写在首页,4个tabbar页面写成组件。页面-首页直接写tabbar首页:<template><view><view class="tabbar"><!-- 组件1 --><view class=
·
最近项目遇到需要自定义底部tabbar的,本来随手写了个组件丢给前端,没想到出现了跳转页面闪一下的情况。于是我决定重构一下。
大体思路就是把tabbar写在首页,4个tabbar页面写成组件。
页面-首页直接写tabbar
首页:
<template>
<view>
<view class="tabbar">
<!-- 组件1 -->
<view class="tab-item" @click="active(0)">
<image class="tab-img" src="/static/images/index_default.png" v-if="activecount != 0"></image>
<image class="tab-img" src="/static/images/index_active.png" v-if="activecount == 0"></image>
<view class="tab-word" :class="activecount == 0?'tab-active':''">
首页
</view>
</view>
<!-- 组件2 -->
<view class="tab-item" @click="active(1)">
<image class="tab-img" src="/static/images/filter_default.png" v-if="activecount != 1"></image>
<image class="tab-img" src="/static/images/filter_active.png" v-if="activecount == 1"></image>
<view class="tab-word" :class="activecount == 1?'tab-active':''">
档案
</view>
</view>
<!-- 中间的+号页面 -->
<view class="tab-item" @click="active(2)">
<image class="tab-img publishFill" src="/static/images/publish.png" v-if="activecount != 2"></image>
<image class="tab-img publishFill" src="/static/images/publish.png" v-if="activecount == 2"></image>
</view>
<!-- 组件3 -->
<view class="tab-item" @click="active(3)">
<image class="tab-img" src="/static/images/mind_defalut.png" v-if="activecount != 3"></image>
<image class="tab-img" src="/static/images/mind_active.png" v-if="activecount == 3"></image>
<view class="tab-word" :class="activecount == 3?'tab-active':''">
能力
</view>
</view>
<!-- 组件4 -->
<view class="tab-item" @click="active(4)">
<image class="tab-img" src="/static/images/my_defalut.png" v-if="activecount != 4"></image>
<image class="tab-img" src="/static/images/my_active.png" v-if="activecount == 4"></image>
<view class="tab-word" :class="activecount == 4?'tab-active':''">
我的
</view>
</view>
</view>
<index v-if="activecount === 0"></index>
<archives v-if="activecount === 1"></archives>
<mind v-if="activecount === 3"></mind>
<mycenter v-if="activecount === 4"></mycenter>
</view>
</template>
<script>
import index from '../../../components/index/index.vue';
import archives from '../../../components/archives/archives.vue';
import mind from '../../../components/mind/mind.vue';
import mycenter from '../../../components/mycenter/mycenter.vue';
export default {
data() {
return {
activecount: 0
};
},
methods: {
sendArtId(artId){
this.getcommentArdId = artId;
},
active(num) {
if (num == 2) {
uni.navigateTo({
url: "/teaArchive/pages/publish/publish"
})
} else {
this.activecount = num;
}
}
},
components: {
index,
archives,
mind,
mycenter,
}
}
</script>
<style>
.tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 130rpx;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
padding: 16rpx 46rpx;
box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.06);
z-index: 999999;
}
.tab-item {
text-align: center;
}
.tab-item .tab-img {
width: 52rpx;
height: 52rpx;
}
.tab-word {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #7A887D;
line-height: 20rpx;
}
.tab-active {
color: #338A5F !important;
}
.bage {
width: 32rpx;
height: 32rpx;
background-color: rgba(255, 105, 91, 1);
color: #FFFFFF;
border-radius: 50%;
line-height: 30rpx;
position: absolute;
top: 16rpx;
margin-left: 16rpx;
}
.publishFill {
width: 112rpx !important;
height: 112rpx !important;
background: #338A5F;
border-radius: 112rpx;
margin-top: -40rpx;
}
</style>
4个组件就是普通的vue组件,这里就不写了。
组件里上拉加载,页面触底等操作就uniapp的 scroll-view 就能完美解决问题,散会。
更多推荐
已为社区贡献1条内容
所有评论(0)