144 lines
2.6 KiB
Vue
144 lines
2.6 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)">
|
|||
|
|
<donghua :width="`60rpx`" :height="`60rpx`" :links="donghuaArray[index]" :playing="playing==index"
|
|||
|
|
:interval="50" />
|
|||
|
|
<view class="bottom-text">
|
|||
|
|
{{item}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
onMounted
|
|||
|
|
} from 'vue'
|
|||
|
|
import {
|
|||
|
|
genPaths
|
|||
|
|
} from '@/compontent/public/issame.js'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
itemTarget: {
|
|||
|
|
type: Number,
|
|||
|
|
required: true, // 如果必须传
|
|||
|
|
default: -1 // 如果您想给默认值
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const playing = ref(-1);
|
|||
|
|
const photoplay = ref(false);
|
|||
|
|
const itemArray = ["NU", "动态", "我的"];
|
|||
|
|
const donghuaArray = [genPaths(
|
|||
|
|
'/static/donghua/home',
|
|||
|
|
'home',
|
|||
|
|
19, // 张数
|
|||
|
|
'png',
|
|||
|
|
0, // 起始索引
|
|||
|
|
false // 不补零
|
|||
|
|
), genPaths(
|
|||
|
|
'/static/donghua/new',
|
|||
|
|
'new',
|
|||
|
|
18, // 张数
|
|||
|
|
'png',
|
|||
|
|
0, // 起始索引
|
|||
|
|
false // 不补零
|
|||
|
|
), genPaths(
|
|||
|
|
'/static/donghua/my',
|
|||
|
|
'my',
|
|||
|
|
14, // 张数
|
|||
|
|
'png',
|
|||
|
|
0, // 起始索引
|
|||
|
|
false // 不补零
|
|||
|
|
)]
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
photoplay.value = true;
|
|||
|
|
playing.value = props.itemTarget
|
|||
|
|
})
|
|||
|
|
const jumpto = (index) => {
|
|||
|
|
if (index != props.itemTarget) {
|
|||
|
|
switch (index) {
|
|||
|
|
case 0:
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: `/pages/supplierindex/index`
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: `/pages/supplierindex/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: 9999;
|
|||
|
|
|
|||
|
|
.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: #01a8ff;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-text {
|
|||
|
|
margin-top: -15rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|