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> |