107 lines
2.0 KiB
Vue
107 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<!-- 底部的栏，为啥这样写，是因为要做左右拉动 -->
|
|||
|
|
<view class="botton-view">
|
|||
|
|
<view v-for="(item,index) in itemArray" :key="index" class="array-father">
|
|||
|
|
<view :class="itemTarget===index ? `bottom-button-target` : `bottom-button`" @click="jumpto(index)">
|
|||
|
|
<image class="botton-img"
|
|||
|
|
:src="`https://www.focusnu.com/media/directive/index/itemsbutton/${index}${itemTarget===index?1:0}.png`" />
|
|||
|
|
<view class="bottom-text">
|
|||
|
|
{{item}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref
|
|||
|
|
} from 'vue'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
itemTarget: {
|
|||
|
|
type: Number,
|
|||
|
|
required: true // 如果必须传
|
|||
|
|
// default: 0 // 如果你想给默认值
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const itemArray = ["NU", "动态", "我的"];
|
|||
|
|
|
|||
|
|
const jumpto = (index) => {
|
|||
|
|
if(index!=props.itemTarget){
|
|||
|
|
switch (index) {
|
|||
|
|
case 0:
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: `/pages/index/index`
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: `/pages/index/mine`
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.botton-view {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 120rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-weight: 500;
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
.bottom-button {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-button-target {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: rgb(42, 133, 235);
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blue-heng {
|
|||
|
|
height: 6rpx;
|
|||
|
|
width: 150rpx;
|
|||
|
|
background-color: rgb(42, 133, 235);
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 55rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
/* 左边缘到父容器左边的距离占父宽度 50% */
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.array-father {
|
|||
|
|
width: 33%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.botton-img {
|
|||
|
|
width: 38rpx;
|
|||
|
|
height: 38rpx;
|
|||
|
|
margin-bottom: 5rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|