1. 自定义tabbar效果
文章来源:https://www.toymoban.com/news/detail-773070.html
2. pages新建tabbar页面
- 首先在
pages.json
文件中,新建一个tabbar
页面
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/tabbar",
"style": {
"navigationBarTitleText": "tabbar页面",
"navigationStyle": "custom"
}
},
.....// 其他页面
],
3. tabbar 页面结构
- 此页面主要是写 tabbar的html样式和布局,引用主页面代码,通过
v-if
控制进行展示index
,search
,maim
,news
,me
一级页面
文章来源地址https://www.toymoban.com/news/detail-773070.html
4. tabbar 页面完整代码
- css 样式文件太多了就不贴出来了
<template>
<view>
<index v-if="PageCur=='index'"></index>
<search v-if="PageCur=='search'"></search>
<news v-if="PageCur=='news'"></news>
<me v-if="PageCur=='me'"></me>
<view class="box">
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="index">
<view class='cuIcon-cu-image'>
<image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image>
<image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image>
</view>
<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
</view>
<view class="action" @click="NavChange" data-cur="search">
<view class='cuIcon-cu-image'>
<view class="cu-tag badge"></view>
<image v-if="PageCur=='search'" src="../../static/tabBar/shop_cur.png"></image>
<image v-if="PageCur != 'search'" src="../../static/tabBar/shop.png"></image>
</view>
<view :class="PageCur=='search'?'color_main':'text-gray'">会员专区</view>
</view>
<view @click="NavChange" class="action text-gray add-action" data-cur="main">
<image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image>
<view :class="PageCur=='main'?'color_main':'text-gray'">组件模板</view>
</view>
<view class="action" @click="NavChange" data-cur="news">
<view class='cuIcon-cu-image'>
<view class="cu-tag badge">{{message}}</view>
<image v-if="PageCur=='news'" src="../../static/tabBar/order_cur.png"></image>
<image v-if="PageCur != 'news'" src="../../static/tabBar/order.png"></image>
</view>
<view :class="PageCur=='news'?'color_main':'text-gray'">文章资讯</view>
</view>
<view class="action" @click="NavChange" data-cur="me">
<view class='cuIcon-cu-image'>
<image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image>
<image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image>
</view>
<view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view>
</view>
</view>
</view>
</view>
</template>
<script>
import index from "./index.vue"; //首页
import search from "./search.vue"; //会员专区
import main from "./main.vue"; //组件模板
import news from "./news.vue"; //文章咨询
import me from "./me.vue"; //个人中心
export default {
components: {
index,
search,
main,
news,
me
},
data() {
return {
PageCur: 'index',
message: '99+',
duration:1
};
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur;
},
}
}
</script>
<style lang="scss">
// 省略
</style>
到了这里,关于uni-app 微信小程序之自定义中间圆形tabbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!