本文介绍: 首先在pages.json文件中,新建一个tabbar页面“pages“: [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages“style“: {“navigationBarTitleText“: “tabbar页面“,},…..// 其他页面],tabbar页面代码此页面主要是写tabbar的html样式和布局,引用主页面代码,通过v–if控制进行展示主页面indexsearchmaimnews。
1. 自定义tabbar效果
2. pages新建tabbar页面
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/tabbar",
"style": {
"navigationBarTitleText": "tabbar页面",
"navigationStyle": "custom"
}
},
.....// 其他页面
],
3. tabbar 页面结构
4. tabbar 页面完整代码
<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>
原文地址:https://blog.csdn.net/qq_36410795/article/details/134746031
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_29618.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。