积累vue中的效果图实现

Posted 2021-03-08 lvqiupingboke-2019

一，制作详情页的返回箭头，当回到主页时，箭头隐藏

 

 

 

1，思路，这里不用a标签跳转，用点击事件。

<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="goBack()">

</span>

 

methods:{

//返回健方法：s

goBack(){

this.$router.go(-1);

},

}

2,完成了返回功能，，完善一下，当回到首页隐藏箭头

<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="goBack()" v-show=“flag”>

</span>

 

return{

flag:false,

}

 

在跟方法同层的有一个监听事件的属性：watch

//隐藏返回键：s,第一步要监听(watch监听)到地址路由的改变，再判断是显示／隐藏显示？

methods:{}

watch:{

"$route.path":function(newVal){

if(newVal === "/HelloWorld"){

this.flag=false

}else{

this.flag=true

}

}

},

二：实现底部导航栏的页面跳转

 

 1，

<router-link class="mui-tab-item" target="_blank" to="/bEdition">

<span class="mui-icon mui-icon-contact" ></span>

<span class="mui-tab-label" >新版</span>

</router-link>

2，

created(){

this.tel();

this.win();

},

methods:{

//手机版加入代码,实现底部导航栏的页面跳转：

tel(){mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;})},

//电脑版加入代码,实现底部导航栏的页面跳转：

win(){ mui(‘body‘).on(‘click‘,‘a‘,function(){document.location.href=this.href;})},

}