You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.3 KiB
100 lines
2.3 KiB
7 months ago
|
<template>
|
||
|
<cover-view class="tabbarbox">
|
||
|
<cover-view class="tablist" v-for="(el,ind) in list" @click="getpath(el.pagePath)" :key="ind">
|
||
|
<cover-image class="tbimg" :src="info.ind==el.index?el.selectedIconPath:el.iconPath" mode="aspectFill"
|
||
|
lazy-load="true"></cover-image>
|
||
|
<cover-view :class="['tbtext',info.ind==el.index?'act':'']">{{el.text}}</cover-view>
|
||
|
</cover-view>
|
||
|
</cover-view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
props: ['info'],
|
||
|
data() {
|
||
|
return {
|
||
|
list: [{
|
||
|
"pagePath": "/pages/index",
|
||
|
"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-sy0.png",
|
||
|
"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-sy1.png",
|
||
|
"text": "首页",
|
||
|
"index": 0
|
||
|
}, {
|
||
|
"pagePath": "/pages/dydl",
|
||
|
"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-dt0.png",
|
||
|
"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-dt1.png",
|
||
|
"text": "文体旅地图",
|
||
|
"index": 1
|
||
|
},
|
||
|
// {
|
||
|
// "pagePath": "/pages/tab/index/index",
|
||
|
// "iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/icon-cgyy0.png",
|
||
|
// "selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/icon-cgyy1.png",
|
||
|
// "text": "预约",
|
||
|
// "index": 2
|
||
|
// },
|
||
|
{
|
||
|
"pagePath": "/pages/tab/my/index",
|
||
|
"iconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-wd0.png",
|
||
|
"selectedIconPath": "https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-wd1.png",
|
||
|
"text": "我的",
|
||
|
"index": 2
|
||
|
}]
|
||
|
}
|
||
|
},
|
||
|
onLoad() {
|
||
|
|
||
|
},
|
||
|
onReady() {
|
||
|
|
||
|
},
|
||
|
methods: {
|
||
|
getpath(url) {
|
||
|
console.log(url)
|
||
|
uni.reLaunch({
|
||
|
url: url
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.tabbarbox {
|
||
|
position: fixed;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 120upx;
|
||
|
background-color: #FFFFFF;
|
||
|
display: flex;
|
||
|
z-index: 999999;
|
||
|
justify-content: space-evenly;
|
||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||
|
align-items: center;
|
||
|
|
||
|
.tablist {
|
||
|
width: 25%;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: center;
|
||
|
text-align: center;
|
||
|
|
||
|
.tbimg {
|
||
|
width: 62upx;
|
||
|
height: 62upx;
|
||
|
margin: 5upx auto;
|
||
|
}
|
||
|
|
||
|
.tbtext {
|
||
|
font-size: 26upx;
|
||
|
color: #666666;
|
||
|
}
|
||
|
|
||
|
.act {
|
||
|
color: #999999;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|