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

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>