精华内容
下载资源
问答
  • 效果展示图 ...你需要先定义好一个currentIndex,当点击事件时需要把当前index赋值给他。动态绑定的class就是根据他就行改变的。需要自己定义一个活跃状态的class样式类。我这里用的是.active

    效果展示图

    当处于点击状态的按钮会有背景颜色

    html代码

    我用了pug模板,所以只需要写但标签就可以了

    <template lang="pug">
               .record
                    img.title(src="@/assets/img/invite-page/mgn/invite-title.png")
                    .nav-bar
                        span(:class="{active:currentIndex===index}"
                         @click="itemClick(index)"
                         v-for="(item,index) in titles"
                         :key="index"
                         ) {{item}}
                    table(v-if='isShow')
                        thead.head
                            tr.top
                                th 姓名
                                th 当前状态
                                th 我的奖励
                        tbody
                            tr.top(v-for="(item, index) in recordList" :key="index")
                                td {{item.customerName}}
                                td {{item.status}}
                                td {{item.reward}}
                    .isNull(v-else)
                        img(src="@/assets/img/invite-page/mgn/none.png")
                        .text 暂无好友完成{{text}}<br>快去邀请好友吧!               
                      
    </template>
    

    js代码和样式

    <script>
    import {
        inviteRecord
        //- listrecentreward
    } from '@/service/customer-relationship-server'
    export default {
        name: 'RecordList',
        data() {
            return {
                titles: ['已注册', '已开户', '已入金'],
                currentIndex: 0,
                recordList: [],
                text: '注册'
            }
        },
        computed: {
            isShow() {
                if (this.recordList && this.recordList.length === 0) {
                    return false
                }
                return true
            }
        },
        methods: {
            itemClick(index) {
                console.log(index)
                this.currentIndex = index
                switch (index) {
                    case 0:
                        this.text = '注册'
                        break
                    case 1:
                        this.text = '开户'
                        break
                    case 2:
                        this.text = '入金'
                        break
                }
                this.getInfo()
            },
            getInfo() {
                let type = this.currentIndex + 1
                inviteRecord(type).then(res => {
                    this.recordList = res.slice(0, 3)
                })
            }
        },
        created() {
            this.getInfo()
        }
    }
    </script>
    
    <style lang="scss" scoped>
    .record {
        margin: 0px auto;
        padding-bottom: 20px;
        width: 345px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        .title {
            height: 39.5px;
            margin-top: -13px;
        }
        .nav-bar {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            margin: 10px auto;
            span {
                display: inline-block;
                width: 64px;
                height: 23px;
                border: 1px solid #003effff;
                color: #003effff;
                text-align: center;
                line-height: 23px;
                font-size: 12px;
                border-radius: 11.5px;
            }
            .active {
                background: #003eff;
                color: #fff;
            }
        }
        table {
            width: 100%;
            text-align: center;
            font-size: 12px;
            .head {
                border-bottom: 1px solid rgba(18, 255, 211, 1);
            }
            .top {
                margin: 6px auto;
                td {
                    width: 33%;
                }
            }
        }
        .isNull {
            text-align: center;
            img {
                height: 74px;
                margin: 10px auto;
            }
            .text {
                font-size: 12px;
                color: #003eff;
            }
        }
    }
    </style>
    

    特别注意

    你需要先定义好一个currentIndex,当点击事件时需要把当前index赋值给他。动态绑定的class就是根据他就行改变的。需要自己定义一个活跃状态的class样式类。我这里用的是.active

    展开全文
  • vue配合mint-ui 做简单的切换。自己学习编写,如果使用再工作上,有问题,概不负责
  • vue点击导航栏部分,页面切换

    千次阅读 2018-11-05 16:31:00
    页面的时候都会用到一些导航栏点击不同的部分切换不同的页面、并且点击的时候更换颜色 代码自己简单的写一下:(vue) <nav> <ul>  <li v-for="(item, i) in navData" :class="{ nav_li : ...

    写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面、并且点击的时候更换颜色

    代码自己简单的写一下:(vue)

    <nav>  
      <ul>     <li v-for="(item, i) in navData" :class="{ nav_li : active === i }" :key="i" @click="$router.push({ path: item.path }), active = i">       {{item.name}}     </li> </ul>
    </nav>

    js部分代码:

    <script>
    export default {
      data () {
        return {
          active: 0,
          navData: [
            { name: '1', path: '/配置的路由' },
            { name: '2', path: '/配置的路由' },
            { name: '3', path: '/配置的路由' },
            { name: '4', path: '/配置的路由' },
            { name: '5', path: '/配置的路由' }
          ]
        }
      }
    </script>

    css样式:

     ul {
            width: 1200px;
            height: 88px;
            line-height: 88px;
            margin: 0 auto;
            background: #3b2d50;
            color: #fff;
            font-size: 18px;
            display: flex;
             justify-content: space-between;
           
            li {
                    text-align: center;
                }
                .nav_li {
                    background-color: #dedede;
                    color: #353535;
      }            

     

    转载于:https://www.cnblogs.com/yd-MM/p/9909827.html

    展开全文
  • 今天小编就为大家分享一篇Vue 菜单栏点击切换单个class(高亮)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue实现底部导航栏切换页面更换

    万次阅读 2019-02-18 12:04:50
    // console.log('点击切换函数' + val) if (typeof val === 'string') { switch (val) { case '/': this.imagesUrl.homeIcon = './static/img/home/navigation/click_home.png' // 首页 this.imagesUrl....

     

    <style>
        #bottomNavigationFullScreen {
            position: fixed;
            bottom: 0;
            z-index: 9999;
            height: 60px;
            width: 100%;
            -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
            box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
            background-color: #fff;
        }
        .bottomNavigation_content {
        }
    
        .bottomNavigation_li_content {
            height: 60px;
            display: flex;
            justify-content:center;
             align-items: center;
            text-align: center;
        }
    
        .bottomNavigation_li_public_content {
            flex: 1;
            height: 45px;
            /* margin-left: 3px;
            background-color: #ccc; */
        }
        .bottomNavigation_li_public_content img {
            height: 24px;
            width: 24px;
        }
        .bottomNavigation_li_public_content div {
            position: relative;
            bottom: 3px;
        }
    
        .no_select {
            font-size: 12px;
            color: #222;
        }
    
        @keyframes select {
          0% {
            font-size: 12px;
          }
          50% {
            font-size: 13px;
          }
          100% {
            font-size: 14px;
          }
        }
        .select {
            animation: select 0.6s;
            font-size: 14px;
            color: #2196f3;
        }
    </style>
    <template>
        <div id="bottomNavigationFullScreen">
          <div class="bottomNavigation_content">
            <div class="bottomNavigation_li_content">
                <div class="bottomNavigation_li_public_content"  @click="publicClick('/')">
                    <img :src="imagesUrl.homeIcon" alt="">
                    <div :class="imagesUrl.homeIcon.indexOf('click_home') === -1 ? 'no_select' : 'select' ">首页</div>
                </div>
                <div class="bottomNavigation_li_public_content" @click="publicClick('/recharge')">
                    <img :src="imagesUrl.rechargeIcon" alt="">
                    <div :class="imagesUrl.rechargeIcon.indexOf('click_recharge') === -1 ? 'no_select' : 'select' ">充值</div>
                </div>
                <div class="bottomNavigation_li_public_content" @click="publicClick('/more')">
                    <img :src="imagesUrl.moreIcon" alt="">
                    <div :class="imagesUrl.moreIcon.indexOf('click_more') === -1 ? 'no_select' : 'select' ">更多</div>
                </div>
                <div class="bottomNavigation_li_public_content" @click="publicClick('/my')">
                    <img :src="imagesUrl.myIcon" alt="">
                    <div :class="imagesUrl.myIcon.indexOf('click_my') === -1 ? 'no_select' : 'select' ">我的</div>
                </div>
            </div>
          </div>
        </div>
    </template>
    <script>
        export default {
            name: 'bottomNavigation',
            data() {
                return {
                    imagesUrl: { // 排版图片使用懒加载
                        homeIcon: './static/img/home/navigation/home.png', // 首页
                        rechargeIcon: './static/img/home/navigation/recharge.png', // 充值
                        moreIcon: './static/img/home/navigation/more.png', // 更多
                        myIcon: './static/img/home/navigation/my.png' // 我的
                    }
                }
            },
            activated() {
                if (typeof this.$route.path === 'string') {
                    let val = this.$route.path
                    // let val = this.$route.path.substring(1, this.$route.path.length)
                    // console.log(val)
                    switch (val) {
                        case '/':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/click_home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                            break
                        case '/recharge':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/click_recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                            break
                        case '/more':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/click_more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                            break
                        case '/my':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/click_my.png' // 我的
                            break
                    }
                } else {
                    console.log('不合法参数')
                }
            },
            methods: {
                // 点击切换函数
                clickChang(val) {
                    // console.log('点击切换函数' + val)
                    if (typeof val === 'string') {
                        switch (val) {
                            case '/':
                                this.imagesUrl.homeIcon = './static/img/home/navigation/click_home.png' // 首页
                                this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                                this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                                this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                                this.$router.push({ path: '/' })
                                // console.log(this.imagesUrl)
                                break
                            case '/recharge':
                                this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                                this.imagesUrl.rechargeIcon = './static/img/home/navigation/click_recharge.png' // 充值
                                this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                                this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                                this.$router.push({ path: '/recharge' })
                                // console.log(this.imagesUrl)
                                break
                            case '/more':
                                this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                                this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                                this.imagesUrl.moreIcon = './static/img/home/navigation/click_more.png' // 更多
                                this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                                this.$router.push({ path: '/more' })
                                // console.log(this.imagesUrl)
                                break
                            case '/my':
                                this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                                this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                                this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                                this.imagesUrl.myIcon = './static/img/home/navigation/click_my.png' // 我的
                                this.$router.push({ path: '/my' })
                                // console.log(this.imagesUrl)
                                break
                        }
                    } else {
                        console.log('不合法的传值')
                    }
                },
                // 点击导航栏事件
                publicClick(val) {
                    // console.log('点击导航栏事件' + val)
                    if (typeof val === 'string') {
                        switch (val) {
                            case '/':
                                this.clickChang(val)
                                // this.$router.push({ path: '/' })
                                break
                            case '/recharge':
                                this.clickChang(val)
                                // this.$router.push({ path: '/recharge' })
                                break
                            case '/more':
                                this.clickChang(val)
                                // this.$router.push({ path: '/more' })
                                break
                            case '/my':
                                this.clickChang(val)
                                // this.$router.push({ path: '/my' })
                                break
                        }
                    } else {
                        console.log('不合法的传值')
                    }
                }
            }
        }
    </script>
    

    注意就是 跳转路由自行更换  还有就是 activated 这个生命周期的问题 我是使用了 keepAlive 如果没有使用keepAlive  activated 替换为 created

    如何使用组件

    
    </template>
        <div>
          内容
        </div>   
        <bottomNavigation></bottomNavigation>
    <template>
    
    <script>
    import bottomNavigation from '组件目录' // 底部导航栏
    export default {
            components: {
                bottomNavigation
            },
    }
    </script>

     

    展开全文
  • 功能需求:点击底部导航栏切换图片及页面(如下效果) (以下代码只展示重要部分,css等样式请自行编写) 父组件代码(导航栏页) <template> <div> <keep-alive> <router-view></...

    功能需求:点击底部导航栏切换图片及页面(如下效果)

    (以下代码只展示重要部分,css等样式请自行编写)

    父组件代码(导航栏页)
    <template>
      <div>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
        <!--      底部导航栏-->
        <el-row class="bottom-nav">
          <router-link
            v-for="(i,index) in list"
            :key="index"
            @click="addClassName(i.path)"
            :to="i.path">
            <el-col :span="8">
    <!--          三元表达式-->
              <div><img :src="i.path===$route.path?list[index].active : list[index].img"></div>
              <div class="grid-content">{{i.name}}</div>
            </el-col>
          </router-link>
        </el-row>
      </div>
    </template>
    
    <script>
        export default {
            name: "homePage",
            props:['tabName'],
            data() {
                return {
                    num:true,
                   list:[
    
                       {
                           img: require("../../assets/image/homePage-1.png"),  //原始显示的图标
                           active: require("../../assets/image/homePage.png"), //点击之后要显示的图标
                           name: "首页",
                           path: "/homePage"
                       },
                       {
                           img: require("../../assets/image/news-1.png"),
                           active: require("../../assets/image/news.png"),
                           name: "消息",
                           path: "/news"
                       },
                       {
                           img: require("../../assets/image/myself-1.png"),
                           active: require("../../assets/image/myself.png"),
                           name: "我的",
                           path: "/myself"
                       }
    
                   ],
    
    
                }
            },
    
            methods: {
                addClassName: function(path) {
                    this.$router.replace(path);
                },
            }
        }
    </script>
    
    

    注意:图片必须要用require

    子组件部分

    在这里插入图片描述

    路由配置router.js

    在这里插入图片描述
    若要看二级路由切换父组件样式保留请看https://blog.csdn.net/qq_41589917/article/details/103894228
    若有其他疑惑请在下方留言

    展开全文
  • 主要介绍了vue 导航锚点_点击平滑滚动,导航栏对应变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 导航切换页面

    千次阅读 2019-08-23 11:07:24
    vue 导航切换页面 这是我做出来的效果图,点击可以切换页面的 1.里面<router-view></router-view>是路由,/Attention/AttentionAbout和/Attention/AttentionCollect是跳转页面路径 <div class=...
  • 今天小编就为大家分享一篇vue设置导航栏、侧边栏为公共页面的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 类似走马灯的切换页面 代码基本上基于下链接的博主 自己增加了一点点小内容 https://blog.csdn.net/Lccccb/article/details/104671115 继续赶项目了…有问题评论或私信 有机会再改善一下 <template> <div...
  • 这里是在computed下监听导航栏点击事件,this.$refs = undefined。 1、可以在this.$nextTick(()=>{ //do something})中执行滚动事件 computed:{ ...mapState('menu', { navActive: 'navActive' }), ...
  • 主要介绍了vue实现中部导航栏布局功能,本文图文并茂,代码实例相结合介绍的非常详细,需要的朋友参考下吧
  • 示例 homepage页面代码 在index.js里面进行配置下图
  • 最近写到导航栏的时候遇到一个问题,就是我们要实现导航栏中的被选中的项目高亮,而其他的项目保持原来的颜色,对于这种其实是有两种情况的; 情况1—导航栏是通过v-for遍历生产的 这种生成导航栏的情况还是比较多的...
  • [Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property '$parent' of null" ![图片说明](https://img-ask.csdn.net/upload/202001/21/1579600847_106938.png)
  • 主要为大家详细介绍了基于Vue实现页面切换左右滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在Css做好的前提下,开始改动《点击切换页面》 在里有个大个的div用来id绑定Vue 设置一个img 可以用style绑定在data里面做Css 再用v-bind绑定图片 如图: imgSrc作为显示图片 在data里面绑定选中的图片路径 后面四个...
  • Vue导航栏  用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果,底部的图标全是UI给的选中和...
  • 主要为大家详细介绍了vue elementUI使用tabs与导航栏联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 我们都知道vue的两大特性:组件化和数据驱动,今天我们就来说说关于vue组件开发,最近由于开发一款移动端商城,底部的导航栏就利用组件化实现的,下面先看看效果图: 实现这个功能我们需要知道父子组件之间的传值...
  • 主要为大家详细介绍了vue.js实现左边导航切换右边内容,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 点击导航栏能够实现内容页面切换主要是依赖于VueRouter功能。 左边点击导航栏进行导航时,路由切换到对应的页面,这里需要使用 <router-link> <router-link>组件可以支持在具有路由功能的应用中 ...
  • <span id="names" @click="toggle(index)" :class="{'active':index ==checkindex }">... checkindex: 0, // 初始化第一个块高亮 } } methods: { toggle (index) { this.checkindex = index }, } .ac..
  • 主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法,一般使用Window scrollTo() 方法实现,本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
  • vue导航点击切换图片

    千次阅读 2019-03-04 18:36:45
    导航切换后对应的彩色图片 换成白色的图片;之前发过一篇用for循环出来三个按钮的切换图片的方法。有兴趣的可以看下https://blog.csdn.net/qq_42221334/article/details/81630634,现在介绍的是未用for循环的方法,...
  • <template> <div style="margin-top:60px;"> <h1 @click="change1('Noe')">数据看板</h1> <h1 @click="change1('projiectList')"> 数据漏斗</h1> <.../div
  • vue 导航菜单重新加载刷新页面

    千次阅读 2019-08-29 14:16:37
    知识库项目点击导航菜单点击子菜单刷新页面的需求 应用 vue在当前页面内路由参数发生变化,怎么进行页面刷新。 传统方式 window.location.reload(); 整个页面进行刷新,会出现白屏,体验不好 this.$router.go...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,640
精华内容 1,856
关键字:

vue导航栏点击切换页面

vue 订阅