• 积累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;})},
    }
  • 相关阅读:
    Linux删除文件相关命令
    Bing语句
    VS2013配置Winpcap
    node10-mongoose
    node09-cookie
    node08-express
    node07-http
    node06-path
    node05-fs
    node04-buffer
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/12339696.html
Copyright © 2020-2023  润新知