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
Unified 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. 372
      pages/my/my.vue
  7. 11
      pages/scan/scan.vue

1
App.vue
View File

@ -6,6 +6,7 @@
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')
uni.hideTabBar();
}, },
onHide: function() { onHide: function() {
console.log('App Hide') 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": { "tabBar": {
"selectedColor": "#009eff", "selectedColor": "#009eff",
"list": [{ "list": [{
"pagePath": "pages/index/index", "pagePath": "pages/index/index"
"text": "首页", // "text": "首页",
"iconPath": "static/tab_icons/home.png" // "iconPath": "static/tab_icons/home.png"
}, },
{ {
"pagePath": "pages/scan/scan", "pagePath": "pages/scan/scan"
"text": "扫一扫", // "text": "扫一扫",
"iconPath": "static/tab_icons/cate.png" // "iconPath": "static/tab_icons/cate.png"
}, },
{ {
"pagePath": "pages/knowledge/knowledge", "pagePath": "pages/knowledge/knowledge"
"text": "知识库", // "text": "知识库",
"iconPath": "static/tab_icons/knownledge.png" // "iconPath": "static/tab_icons/knownledge.png"
}, { }, {
"pagePath": "pages/my/my", "pagePath": "pages/my/my"
"text": "我的", // "text": "我的",
"iconPath": "static/tab_icons/my.png" // "iconPath": "static/tab_icons/my.png"
} }
] ]
} }

67
pages/index/index.vue
View File

@ -16,15 +16,19 @@
<image :src="item" class="scene-img"></image> <image :src="item" class="scene-img"></image>
</view> </view>
</view> </view>
<tabbar :page="page"></tabbar>
</view> </view>
</template> </template>
<script> <script>
import tabbar from "@/components/tabbar/tabbar.vue";
import { mapMutations, mapState } from 'vuex' import { mapMutations, mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
page: "",
//顶部图片 //顶部图片
topImg: "", topImg: "",
leftImg: "", leftImg: "",
@ -39,65 +43,13 @@
...mapState('m_user', ['token']) ...mapState('m_user', ['token'])
}, },
onLoad() { 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.getSwiperList();
this.checkLogin() // this.checkLogin()
},
onShow() {
this.page= "home"
}, },
methods: { 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() { async getSwiperList() {
@ -132,7 +84,8 @@
} }
}, },
} },
components: {tabbar}
} }
</script> </script>

11
pages/knowledge/knowledge.vue
View File

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

372
pages/my/my.vue
View File

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

Write Preview
Loading…
Cancel
Save