92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<view class="footer-menue-wrap">
|
|
<view class="footer-menue-container">
|
|
<view class="footer-menue">
|
|
<view class="menue-item" :data-key="item.key" @tap="gotoLink" v-for="(item, index) in menue" :key="index">
|
|
<navigator :url="item.linkto" class="link" v-if="activeItemClone != item.key" open-type="redirect">
|
|
<image class="menue-item-icon" :src="activeItemClone == item.key ? item.activeIcon : item.icon"></image>
|
|
<view :class="activeItemClone == item.key ? 'menue-item-text-active' : 'menue-item-text'">{{ item.text }}</view>
|
|
</navigator>
|
|
|
|
<view v-if="activeItemClone == item.key">
|
|
<image class="menue-item-icon" :src="activeItemClone == item.key ? item.activeIcon : item.icon"></image>
|
|
<view :class="activeItemClone == item.key ? 'menue-item-text-active' : 'menue-item-text'">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// pages/component/footerMenue/footerMenue.js
|
|
export default {
|
|
data() {
|
|
return {
|
|
menue: [
|
|
{
|
|
icon: '/static/pages/component/footerMenue/images/loginhome.svg',
|
|
activeIcon: '/static/pages/component/footerMenue/images/loginhomeactive.svg',
|
|
linkto: '/pages/home/home',
|
|
text: '首页',
|
|
key: 'home'
|
|
},
|
|
{
|
|
icon: '/static/pages/component/footerMenue/images/loginme.svg',
|
|
activeIcon: '/static/pages/component/footerMenue/images/loginmeactive.svg',
|
|
linkto: '/packageC/pages/login/login',
|
|
text: '我的',
|
|
key: 'me'
|
|
}
|
|
],
|
|
|
|
//active项
|
|
activeItemClone: 'home',
|
|
|
|
activeItemClone: ''
|
|
};
|
|
},
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
props: {
|
|
activeItem: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
},
|
|
mounted() {
|
|
// 处理小程序 attached 生命周期
|
|
this.attached();
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
attached() {
|
|
const me = this;
|
|
},
|
|
|
|
gotoLink() {
|
|
console.log('占位：函数 gotoLink 未声明');
|
|
}
|
|
},
|
|
created: function () {},
|
|
watch: {
|
|
activeItem: {
|
|
handler: function (news, olds, path) {
|
|
this.activeItemClone = this.clone(this.activeItem);
|
|
this.setData({
|
|
activeItemClone: news
|
|
});
|
|
},
|
|
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
@import './footerMenue.css';
|
|
</style>
|