kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

因小程序不支持uni默认的动态tabbar, 因此将tabbar单独抽离出来做成组件

h5_css
蟑螂恶霸 3 years ago
parent
51f69b2676
commit
c86bceb640
7 changed files with 366 additions and 252 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      App.vue
  2. 130
      components/tabbar/tabbar.vue
  3. 24
      pages.json
  4. 67
      pages/index/index.vue
  5. 11
      pages/knowledge/knowledge.vue
  6. 374
      pages/my/my.vue
  7. 11
      pages/scan/scan.vue

1
App.vue
View File

@ -6,6 +6,7 @@
},
onShow: function() {
console.log('App Show')
uni.hideTabBar();
},
onHide: function() {
console.log('App Hide')

130
components/tabbar/tabbar.vue
View File

@ -0,0 +1,130 @@
<template>
<view class="tab_bar">
<view class="tabbarBox">
<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
<view class="menuBox" @click="goPages(item.pageIndex)">
<view class="menuIcon">
<image v-if="item.type!=selectIndex" class="img" :src="item.iconPath"></image>
<image v-else class="img" :src="item.selectIconPath"></image>
</view>
<view class="menuName">
<text :class="item.type==selectIndex?'TextColor':'Text'" >{{item.tabbarName}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
page: {
type: String,
default: "homeIndex"
}
},
watch: {
page: {
handler(value) {
this.selectIndex = value;
},
immediate: true,
deep: true
}
},
data() {
return {
selectIndex: "",
tabBarList: [],
}
},
//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
created() {
//tabbar数据，这儿也支持后台定义通过接口获取数据
// this.tabBarList = [{
// "tabbarName":"", //tababr名称
// "iconPath":"", //tabbar icon
// "selectIconPath":"", //tabbar 选择icon
// "pageIndex":"" //页面路径
// }]
this.listTabbar();
},methods: {
listTabbar() {
this.$api.listTabbar({})
.then(res => {
console.log(res)
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].hide == 1) {
this.tabBarList.push({
"tabbarName": res.data[i].title,
"iconPath": res.data[i].selectedIconPath,
"selectIconPath": res.data[i].selectedIconPath,
"pageIndex": res.data[i].pagePath,
"type": res.data[i].type
});
}
}
}).catch((e) => console.log(e)); //捕获异常
},
//进入tabble页
goPages(pageIndex) {
uni.switchTab({
url:"/"+pageIndex
})
},
},
}
</script>
<style lang="scss">
.tab_bar {
width: 100vw;
height: 120rpx;
position: fixed;
bottom: 30rpx;
/* 模糊大小就是靠的blur这个函数中的数值大小 */
backdrop-filter: blur(10px);
border-radius: 60rpx;
.tabbarBox {
display: flex;
margin-top: 10rpx;
justify-content: space-evenly;
.handleBox {
width: 20vw;
height: 110rpx;
.menuBox {
padding: 0rpx 20rpx;
width: 120rpx;
height: 98%;
text-align: center;
.img {
width: 50rpx;
height: 50rpx;
}
}
}
}
}
.Text {
font-size: 24rpx;
font-family: Cochin, serif;
font-weight: 900;
}
.TextColor {
@extend .Text;
color: #d81e06;
}
</style>

24
pages.json
View File

@ -60,23 +60,23 @@
"tabBar": {
"selectedColor": "#009eff",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tab_icons/home.png"
"pagePath": "pages/index/index"
// "text": "首页",
// "iconPath": "static/tab_icons/home.png"
},
{
"pagePath": "pages/scan/scan",
"text": "扫一扫",
"iconPath": "static/tab_icons/cate.png"
"pagePath": "pages/scan/scan"
// "text": "扫一扫",
// "iconPath": "static/tab_icons/cate.png"
},
{
"pagePath": "pages/knowledge/knowledge",
"text": "知识库",
"iconPath": "static/tab_icons/knownledge.png"
"pagePath": "pages/knowledge/knowledge"
// "text": "知识库",
// "iconPath": "static/tab_icons/knownledge.png"
}, {
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png"
"pagePath": "pages/my/my"
// "text": "我的",
// "iconPath": "static/tab_icons/my.png"
}
]
}

67
pages/index/index.vue
View File

@ -16,15 +16,19 @@
<image :src="item" class="scene-img"></image>
</view>
</view>
<tabbar :page="page"></tabbar>
</view>
</template>
<script>
import tabbar from "@/components/tabbar/tabbar.vue";
import { mapMutations, mapState } from 'vuex'
export default {
data() {
return {
page: "",
//顶部图片
topImg: "",
leftImg: "",
@ -39,65 +43,13 @@
...mapState('m_user', ['token'])
},
onLoad() {
uni.setTabBarItem({
index: 1,
"visible": false
});
uni.setTabBarItem({
index: 2,
"visible": false
});
uni.setTabBarItem({
index: 3,
"visible": false
});
uni.setTabBarItem({
index: 4,
"visible": false
});
this.listTabbar();
this.getSwiperList();
this.checkLogin()
// this.checkLogin()
},
onShow() {
this.page= "home"
},
methods: {
listTabbar() {
this.$api.listTabbar({})
.then(res => {
console.log(res)
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].hide == 1) {
if (res.data[i].type == "home") {
uni.setTabBarItem({
index: 0,
text: res.data[i].title,
"visible": true
});
}
if (res.data[i].type == "scan") {
uni.setTabBarItem({
index: 1,
text: res.data[i].title,
"visible": true
});
}
if (res.data[i].type == "know") {
uni.setTabBarItem({
index: 2,
text: res.data[i].title,
"visible": true
});
}
if (res.data[i].type == "my") {
uni.setTabBarItem({
index: 3,
text: res.data[i].title,
"visible": true
});
}
}
}
}).catch((e) => console.log(e)); //捕获异常
},
async getSwiperList() {
@ -132,7 +84,8 @@
}
},
}
},
components: {tabbar}
}
</script>

11
pages/knowledge/knowledge.vue
View File

@ -1,16 +1,23 @@
<template>
<view>
知识库页面
<tabbar :page="page"></tabbar>
</view>
</template>
<script>
import tabbar from "@/components/tabbar/tabbar.vue";
export default {
data() {
return {
page: "",
};
}
},
onShow() {
this.page= "know"
},
components: {tabbar}
}
</script>

374
pages/my/my.vue
View File

@ -1,208 +1,224 @@
<template>
<view class="my-userinfo-container">
<!-- 头像和昵称区域 -->
<view class="top-box">
<image :src="avatarUrl" class="avatar"></image>
<view class="nickname">盛大鹏</view>
</view>
<!-- 面板区域 -->
<view class="panel-list">
<!-- 第1个面板 -->
<view class="panel">
<view class="panel-body">
<view class="panel-item">
<text>0</text>
<text>勋章</text>
</view>
<view class="panel-item">
<text>0</text>
<text>挑战历史</text>
</view>
</view>
</view>
<!-- 第2个面板 -->
<view class="panel">
<!-- 轮播图 -->
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item, i) in swiperList" :key="i">
<navigator class="swiper-item">
<image :src="item"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 第3个面板 -->
<view class="panel">
<view class="function-list">
<view class="panel-list-item" v-for="(item,i) in functionList" :key="i">
<image class="function-img" :src="item.uploadPath"></image>
<text style="margin-right: 220px;">{{item.name}}</text>
<uni-icons type="arrowright" size="15"></uni-icons>
</view>
</view>
</view>
</view>
<!-- 头像和昵称区域 -->
<view class="top-box">
<image :src="avatarUrl" class="avatar"></image>
<view class="nickname">盛大鹏</view>
</view>
<!-- 面板区域 -->
<view class="panel-list">
<!-- 第1个面板 -->
<view class="panel">
<view class="panel-body">
<view class="panel-item">
<text>0</text>
<text>勋章</text>
</view>
<view class="panel-item">
<text>0</text>
<text>挑战历史</text>
</view>
</view>
</view>
<!-- 第2个面板 -->
<view class="panel">
<!-- 轮播图 -->
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item, i) in swiperList" :key="i">
<navigator class="swiper-item">
<image :src="item"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 第3个面板 -->
<view class="panel">
<view class="function-list">
<view class="panel-list-item" v-for="(item,i) in functionList" :key="i">
<image class="function-img" :src="item.uploadPath"></image>
<text style="margin-right: 220px;">{{item.name}}</text>
<uni-icons type="arrowright" size="15"></uni-icons>
</view>
</view>
</view>
</view>
<tabbar :page="page"></tabbar>
</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import tabbar from "@/components/tabbar/tabbar.vue";
import {
mapState,
mapMutations
} from 'vuex'
export default {
data() {
return {
avatarUrl : uni.$http.baseUrl+"/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
page: "",
avatarUrl: uni.$http.baseUrl + "/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
//轮播图数据列表
swiperList: [],
//主页功能列表
functionList:[]
functionList: []
};
},
onLoad() {
this.getSwiperList()
this.getFunctionList()
},
onShow() {
this.page = "my"
},
computed: {
...mapState('m_user', ['userinfo'])
...mapState('m_user', ['userinfo'])
},
methods: {
...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
async logout() {
const [err, succ] = await uni.showModal({
title: '提示',
content: '确认退出登录吗？'
}).catch(err => err)
if (succ && succ.confirm) {
this.updateAddress({})
this.updateUserInfo({})
this.updateToken('')
}
},
async getSwiperList() {
const {
data: res
} = await uni.$http.post('/small/customImage/listAll',{page:"my"})
if (!res.success) return uni.$showMsg()
res.data.forEach(item=>{
item.uploadPath = uni.$http.baseUrl +item.uploadPath
this.swiperList.push(item.uploadPath)
})
uni.$showMsg('数据请求成功！')
},
async getFunctionList() {
const {
data: res
} = await uni.$http.post('/small/project/home/listAll')
if (!res.success) return uni.$showMsg()
res.data.forEach(item=>{
item.uploadPath = uni.$http.baseUrl +item.uploadPath
})
this.functionList = res.data;
uni.$showMsg('数据请求成功！')
}
...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
async logout() {
const [err, succ] = await uni.showModal({
title: '提示',
content: '确认退出登录吗？'
}).catch(err => err)
if (succ && succ.confirm) {
this.updateAddress({})
this.updateUserInfo({})
this.updateToken('')
}
},
async getSwiperList() {
const {
data: res
} = await uni.$http.post('/small/customImage/listAll', {
page: "my"
})
if (!res.success) return uni.$showMsg()
res.data.forEach(item => {
item.uploadPath = uni.$http.baseUrl + item.uploadPath
this.swiperList.push(item.uploadPath)
})
uni.$showMsg('数据请求成功！')
},
async getFunctionList() {
const {
data: res
} = await uni.$http.post('/small/project/home/listAll')
if (!res.success) return uni.$showMsg()
res.data.forEach(item => {
item.uploadPath = uni.$http.baseUrl + item.uploadPath
})
this.functionList = res.data;
uni.$showMsg('数据请求成功！')
}
},
navClickHandler(item) {
},
components: {
tabbar
}
}
</script>
<style lang="scss">
.my-userinfo-container {
height: 100%;
background-color: #F4F4F4;
.top-box {
height: 400rpx;
background-color: #aba9d0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.avatar {
width: 90px;
height: 90px;
border-radius: 45px;
border: 2px solid #FFF;
box-shadow: 0 1px 5px black;
}
.nickname {
font-size: 16px;
color: black;
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 10px;
}
}
}
.panel-list {
padding: 0 10px;
position: relative;
top: -10px;
.panel {
background-color: white;
border-radius: 3px;
margin-bottom: 8px;
.panel-title {
line-height: 45px;
padding-left: 10px;
font-size: 15px;
border-bottom: 1px solid #F4F4F4;
}
.panel-body {
display: flex;
justify-content: space-around;
.panel-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 10px 0;
font-size: 13px;
.icon {
width: 35px;
height: 35px;
}
}
}
}
}
.function-img{
width: 30px;
height: 30px;
}
.panel-list-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
padding: 0 10px;
line-height: 45px;
}
swiper {
height: 230rpx;
.swiper-item,
image {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
</style>
.my-userinfo-container {
height: 100%;
background-color: #F4F4F4;
.top-box {
height: 400rpx;
background-color: #aba9d0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.avatar {
width: 90px;
height: 90px;
border-radius: 45px;
border: 2px solid #FFF;
box-shadow: 0 1px 5px black;
}
.nickname {
font-size: 16px;
color: black;
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 10px;
}
}
}
.panel-list {
padding: 0 10px;
position: relative;
top: -10px;
.panel {
background-color: white;
border-radius: 3px;
margin-bottom: 8px;
.panel-title {
line-height: 45px;
padding-left: 10px;
font-size: 15px;
border-bottom: 1px solid #F4F4F4;
}
.panel-body {
display: flex;
justify-content: space-around;
.panel-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 10px 0;
font-size: 13px;
.icon {
width: 35px;
height: 35px;
}
}
}
}
}
.function-img {
width: 30px;
height: 30px;
}
.panel-list-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
padding: 0 10px;
line-height: 45px;
}
swiper {
height: 230rpx;
.swiper-item,
image {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
</style>

11
pages/scan/scan.vue
View File

@ -2,20 +2,26 @@
<view>
<view class="video-wrapper" id="video-container">
</view>
<tabbar :page="page"></tabbar>
</view>
</template>
<script>
import tabbar from "@/components/tabbar/tabbar.vue";
export default {
data() {
return {
page: "",
};
},
onReady(){
this.QR();
},
onShow() {
this.page= "scan"
},
methods:{
QR() {
uni.scanCode({
@ -28,7 +34,8 @@
}
})
},
}
},
components: {tabbar}
}
</script>

Write Preview
Loading…
Cancel
Save