积累vue中的效果图实现

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

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;})},
}

猜你喜欢

转载自www.cnblogs.com/lvqiupingboke-2019/p/12339696.html