Skip to content

C
CFFP-HB
Commit 59507115 by sunchao
Options

底部导航栏组件化

parent 331205cf
Showing with 131 additions and 40 deletions
components/tabBar/tabBar.vue 0 → 100644
<template>
<view class="menu_wrapper">
<view class="menu_content">
<view v-for="item in menuLists" :key="item.link" class="tabbar_item" :class="{'active':item.link == currentPage}"
@click="navTo(item,index)">
<view class="pic">
<img v-if="item.link == currentPage" :src="'../../static/tabbar/' + item.selectedIconPath + '.png'" >
<img v-else :src="'../../static/tabbar/' + item.iconPath + '.png'">
</view>
<view class="name">{{item.name}}</view>
</view>
</view>
</view>
</template>
<script>
import tabBarVue from './tabBar.vue';
export default {
props: ['currentPage'],
name:"tabBar",
data() {
return {
menuLists: [
{key:1,name:'首页',iconPath:'home',selectedIconPath:'home_active',link:'index'},
{key:2,name:'SFP智能财策',iconPath:'sfp',selectedIconPath:'sfp_active',link:'/product'},
{key:3,name:'CFFP认证',iconPath:'cffp',selectedIconPath:'cffp_active',link:'cffp'},
{key:4,name:'我的',iconPath:'my',selectedIconPath:'my_active',link:'personalCenter'},
]
}
},
methods: {
navTo(item,index) {
let _this = this;
if (item.link !== _this.currentPage) {
var isUrl = `/pages/${item.link}/${item.link}`
const that = this
uni.navigateTo({
url: isUrl
})
}
}
},
mounted() {
console.log(this.currentPage)
}
}
</script>
<style lang="scss" scoped>
.menu_wrapper{
position: fixed;
bottom: 0;
left: 50%;
width: 100%;
height: 70rpx;
border-top: 1px solid #f5f5f5;
background: #fff;
color: #333;
font-size: 12px;
min-width: 320px;
max-width: 640px;
padding-bottom: 20px;
transform: translateX(-50%);
.menu_content{
display: flex;
align-items: center;
justify-content: space-around;
.pic{
width: 70rpx;
margin: 0 auto;
img{
max-width: 100%;
}
}
.name{
text-align: center;
}
}
}
</style>
\ No newline at end of file
pages.json
......@@ -106,38 +106,38 @@
}
],
"tabBar": {
"color": "#7A7E83", // tab 上的文字默认颜色
"selectedColor": "#7A7E83", // tab 上的文字选中时的颜色
"borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
"backgroundColor": "#ffffff", // tab 的背景色
"fontSize":"28rpx",
"iconWidth":"60rpx",
"height":"120rpx",
"list": [{ // 最少2个、最多5个 tab
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
"iconPath": "static/tabbar/home.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
"selectedIconPath": "static/tabbar/home_active.png", // 选中时的图片路径
"text": "首页" // tab 上按钮文字
},
// { // 最少2个、最多5个 tab
// "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
// "iconPath": "static/tabbar/sfp.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
// "selectedIconPath": "static/tabbar/sfp_active.png", // 选中时的图片路径
// "text": "SFP智能财策" // tab 上按钮文字
// },
{ // 最少2个、最多5个 tab
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
"iconPath": "static/tabbar/cffp.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
"selectedIconPath": "static/tabbar/cffp_active.png", // 选中时的图片路径
"text": "CFFP认证" // tab 上按钮文字
},{
"pagePath": "pages/personalCenter/personalCenter",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/my_active.png",
"text": "我的"
}]
},
// "tabBar": {
// "color": "#7A7E83", // tab 上的文字默认颜色
// "selectedColor": "#7A7E83", // tab 上的文字选中时的颜色
// "borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
// "backgroundColor": "#ffffff", // tab 的背景色
// "fontSize":"28rpx",
// "iconWidth":"60rpx",
// "height":"120rpx",
// "list": [{ // 最少2个、最多5个 tab
// "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
// "iconPath": "static/tabbar/home.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
// "selectedIconPath": "static/tabbar/home_active.png", // 选中时的图片路径
// "text": "首页" // tab 上按钮文字
// },
// // { // 最少2个、最多5个 tab
// // "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
// // "iconPath": "static/tabbar/sfp.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
// // "selectedIconPath": "static/tabbar/sfp_active.png", // 选中时的图片路径
// // "text": "SFP智能财策" // tab 上按钮文字
// // },
// { // 最少2个、最多5个 tab
// "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
// "iconPath": "static/tabbar/cffp.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
// "selectedIconPath": "static/tabbar/cffp_active.png", // 选中时的图片路径
// "text": "CFFP认证" // tab 上按钮文字
// },{
// "pagePath": "pages/personalCenter/personalCenter",
// "iconPath": "static/tabbar/my.png",
// "selectedIconPath": "static/tabbar/my_active.png",
// "text": "我的"
// }]
// },
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
......
pages/index/index.vue
......@@ -50,7 +50,7 @@
</view>
<courselist :tagIds="[1111]"></courselist>
</view>
<tabBar :currentPage="currentPage"></tabBar>
</view>
<uni-popup ref="popup" type="top" background-color="#fff">
<view class="description">
......@@ -62,18 +62,19 @@
<script>
import courselist from '../../components/courselist/courselist.vue';
import api from "../../api/api";
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
data() {
return {
featureLists:[
{ key: '00', name: '销售课程', icon: 'salesCourse', link: '', isOpen: false },
{ key: '01', name: '我的积分', icon: 'integral', link: '', isOpen: false },
{ key: '02', name: '申请加盟', icon: 'applyJoin', link: '../pages/application-process/basic-info', isOpen: true },
{ key: '02', name: '申请加盟', icon: 'applyJoin', link: '../application-process/basic-info', isOpen: true },
{ key: '03', name: '学习认证', icon: 'learningCertify', link: '', isOpen: false },
{ key: '04', name: '邀请加盟', icon: 'shareJoin', link: '', isOpen: true },
{ key: '05', name: '我的分享', icon: 'share', link: '', isOpen: true },
{ key: '06', name: '我的团队', icon: 'team', link: '', isOpen: true },
{ key: '07', name: '更多功能', icon: 'more', link: '../personalCenter/personalCenter', isOpen: true }
{ key: '04', name: '邀请加盟', icon: 'shareJoin', link: '../inviteJoin/inviteJoin', isOpen: false },
{ key: '05', name: '我的分享', icon: 'share', link: '', isOpen: false },
{ key: '06', name: '我的团队', icon: 'team', link: '', isOpen: false },
{ key: '07', name: '更多功能', icon: 'more', link: '../personalCenter/personalCenter', isOpen: false }
],
cffpUserInfo:{
address:'',
......@@ -90,11 +91,13 @@
duration: 500,
announcementInfo:null,
messageUnreadCount:null,
tagIds:123
tagIds:123,
currentPage:'index'
}
},
components:{
courselist
courselist,
tabBar
},
onLoad() {
this.queryAreaCenterInfo();
......
pages/personalCenter/personalCenter.vue
......@@ -47,14 +47,17 @@
</li>
</ul>
</view>
<tabBar :currentPage="currentPage"></tabBar>
</view>
</template>
<script>
import common from "../../common/common";
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
data() {
return {
currentPage:'personalCenter',
customerBasicInfo:{},
mainMenuLists:[
{id:'00',categoryName:'销售管理',
......@@ -100,6 +103,9 @@
}
},
components:{
tabBar
},
methods: {
// 菜单跳转页面
goDetail(item){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment