vue 底部导航状态改变

最新推荐文章于 2022-02-25 16:23:27 发布

H-哈哈哈哈

最新推荐文章于 2022-02-25 16:23:27 发布

阅读量1.1k

点赞数

分类专栏： JavaScript Vue

本文链接：https://blog.youkuaiyun.com/Hocen_Jonin/article/details/87877804

版权

JavaScript 同时被 2 个专栏收录

14 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

HTML：

<div class="footer">
   	<div class="footer-nav" v-for="(item, index) in footer" @click="switchTo(index)">
   		<img v-if="index == idx" :src="item.active_url">
   		<img v-else :src="item.url">
   	</div>
</div>

script：

export default {
  name: 'App',
  data () {
  	return {
  		footer: [{
  			url: require("./assets/images/01.png"),
  			active_url: require("./assets/images/01_1.png"),
  			path: "/home"
  		},{
  			url: require("./assets/images/02.png"),
  			active_url: require("./assets/images/02_2.png"),
  			path: "/shop"
  		},{
  			url: require("./assets/images/03.png"),
  			active_url: require("./assets/images/03_3.png"),
  			path: "/login"
  		}],
  		idx: 0
  	}
  },

  methods: {
  	switchTo: function(i) {
  		var _this = this;
  		_this.idx = i;
  		_this.$router.replace(_this.footer[i].path)
  		console.log(i,this.footer[i].path)
  	}
  }
};

css:

#app{	
	position: relative;
	.nav {
		height: px2rem(98px);
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #e7e7e7;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.nav-list{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			img{
				width: px2rem(50px);
				height: px2rem(50px);
				display: block;
				margin: 0 auto;
			}
		}
	}
}