精华内容
下载资源
问答
  • vue手机端底部导航栏

    千次阅读 2018-07-05 09:23:44
    业务逻辑: 项目多个页面需用到底部导航栏...父组件main.vue中所用的子组件navBar.vue,关于菜单点亮效果,主要是靠路由的跳转来绑定active-class <i :class= "item.class"></i> <span>{{item.desc}} ...

    业务逻辑:
    项目多个页面需用到底部导航栏,所以抽离出来,以组件的方式引入父组件。

    方法一

    更新(2019年5月6日),关于底部导航栏的应用,还可以利用子组件和父组件的关系来绑定。
    首先增加一个父组件文件,main.vue

    <template>
      <div class="main">
        <div class="contant">
          <router-view/>
        </div>
        <nav-bar></nav-bar>
      </div>
    </template>
    <script>
    import navBar from '@/components/common/nav.vue'
    
    export default {
      components: {
        navBar
      }
    }
    </script>
    <style>
     .main{
     background-color: #f2f2f2;
     }
    </style>
    

    父组件main.vue中所用的子组件navBar.vue,关于菜单点亮效果,主要是靠路由的跳转来绑定active-class

    <template>
         <nav>
          <router-link v-for="item in nav" :to=item.router active-class="active" class="tab">
            <i :class= "item.class"></i>
            <span>{{item.desc}}</span>
          </router-link>
        </nav>
    </template>
    
    
    <style scoped lang="less" src="@/assets/css/nav.less"></style>
    <script>
    export default {
      data(){
        return{
          nav:[
            {
              router:"/home",
              class:"icon-home",
              desc:"首页"
            },
            {
              router:"/service",
              class:"icon-service",
              desc:"服务"
            },
            {
              router:"/find",
              class:"icon-find",
              desc:"发现"
            },
            {
              router:"/personal",
              class:"icon-personal",
              desc:"我的"
            },
          ]
        }
      }
    }
    </script>
    

    路由方面(router.js)

    import Vue from 'vue';
    import Router from 'vue-router';
    
    Vue.use(Router);
    
    var router = new Router({
      mode: 'history',
      base: '/',
      routes: [{
          path: '*',
          redirect: '/'
        },
        {
          path: '/',
          name: 'Main',
          component: () => import("@/components/common/main"),
          children: [{
              path: '/home',
              meta: {
                title: "首页"
              },
              component: () => import("@/views/home/home")
            },
            {
              path: '/service',
              meta: {
                title: "服务"
              },
              component: () => import("@/views/service/index")
            },
            {
              path: '/find',
              meta: {
                title: "发现"
              },
              component: () => import("@/views/find/index")
            },
            {
              path: '/personal',
              meta: {
                title: "个人中心"
              },
              component: () => import("@/views/personal/index")
            },
    
          ]
        },
      ]
    });
    
    router.beforeEach((to, from, next) => {
    
      //  路由发生变化修改页面title
      if (to.meta.title) {
        document.title = to.meta.title;
      }
    
      //  是否需要登录
      if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!localStorage.Authorization) {
          next({
            path: '/login'
          })
        } else {
          next();
        }
      } else {
        next();
      }
    })
    
    export default router
    
    

    其余的home,service,find,personal子组件页面可自行定义

    方法二
    2018年7月5日
    业务逻辑
    由于项目不只是主页需要导航,还有一些子页面也需要用到导航,所以不能用绑定router来实现导航的状态,故在引入组件的时候带个值(page)过去判断

    navBar页面

    <template>
      <ul class="nav">
        <li v-for="(item,index)  in arr" :class="item.add_link">
          <router-link :to="{name:item.url}" @click="navClick(index)">
            <i class="icon" :class="index===page?item.iconClassActive:item.iconClass"></i>
    
            <span :class="{active:index===page}" >{{ item.title }}</span>
          </router-link>
        </li>
      </ul>
    </template>
    
    <script>
    import { mapGetters } from 'vuex';
    
      export default {
        name: "app-nav",
        props:['page'],
        data (){
          return {
            arr: [
              {
                title: "首页",
                url: "Financing",
                iconClass: "icon_index",
                iconClassActive:"icon_indexActive",
              },
              {
                title: "产品列表",
                url: "ProductList",
                iconClass: "icon_product",
                iconClassActive:"icon_productActive",
              }, {
                title: "个人中心",
                url: "Personal",
                iconClass: "icon_user",
                iconClassActive:"icon_userActive",
              }
            ],
          }
        }
      }
    </script>
    
    <style lang="css" src='../../style/common.css' scoped></style>
    <style scoped="less">
      .nav{
        position: fixed;
        bottom: 0;
        left: 0;
        height: .76rem;
        width: 100%;
        background: #fff;
        border-top: 1px solid #dcdcdc;
        padding: .12rem 0;
      }
      .nav li{
        width: 33.33%;
        float: left;
        text-align: center;
        font-size: .24rem;
      }
      .nav li .icon{
        display: block;
        height: .44rem;
        width: 100%;
        margin: 0 auto;
      }
      .nav li .icon_index{
        background: url("../../assets/icon_index.png") no-repeat center;
        background-size: .41rem .4rem;
      }
      .nav li .icon_indexActive{
        background: url("../../assets/icon_indexActive.png") no-repeat center;
        background-size: .41rem .4rem;
      }
      .nav li .icon_product{
        background: url("../../assets/icon_product.png") no-repeat center;
        background-size: .32rem .42rem;
      }
      .nav li .icon_productActive{
        background: url("../../assets/icon_productActive.png") no-repeat center;
        background-size: .32rem .42rem;
      }
      .nav li .icon_user{
        background: url("../../assets/icon_user.png") no-repeat center;
        background-size: .44rem .44rem;
      }
      .nav li .icon_userActive{
        background: url("../../assets/icon_userActive.png") no-repeat center;
        background-size: .44rem .44rem;
      }
      .nav li span{
        display: block;
        color: #747682;
        padding-top: .1rem;
      }
      .nav li span.active{
        color: #D2A330;
      }
    </style>
    

    路由router.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import NavBar from '../components/common/NavBar'// 导航
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        { path: '/fortuneCenter/nav_bar', name: 'NavBar', component: NavBar },
      ]
    })
    

    页面

     <nav-bar :idx="0"></nav-bar>
    
    展开全文
  • 单独写的一个悬浮按钮组件,在父组件中引入使用即可,样式可能还有些问题,在手机中还能够用。但是在pad之类的大屏幕设备上,位置和大小有些问题。后面再看看 。 isPad是为了处理pad设备上的按钮大小和位置的,不...

    前言:借鉴的百度出来的一篇文章修改的,但是想记录一下的时候,找不到那篇文章了。仅做记录用:

    单独写的一个悬浮按钮组件,在父组件中引入使用即可,样式可能还有些问题,在手机中还能够用。但是在pad之类的大屏幕设备上,位置和大小有些问题。后面再看看 。

    isPad是为了处理pad设备上的按钮大小和位置的,不需要的话,需要删除一下全篇的isPad和三目运算符。

    父组件中,import,components:{}   <floatButton></floatButton> 就好了

    <template>
    <!--  子组件 -->
      <div class="float_button">
        <div
          @click="onBtnClicked"
          ref="floatButton"
          class="float_info"
          :style="{'width': itemWidth + 'px','margin':'5px 10px', 'height': itemHeight + 'px', 'left': left + 'px', 'top': top + 'px'}"
        >
          <span class="text">{{ text }}</span>
        </div>
      </div>
    </template>
    <script>
    import {
      isPad
    } from "util/index"
    export default {
    
      data() {
        return {
          clientWidth: 0,
          clientHeight: 0,
          timer: null,
          currentTop: 0,
          left: 0,
          top: 0,
          text: "联系我们",
          itemWidth:  isPad() ? 90 : 70 ,  //按钮宽度
          isShort: true,
          itemHeight: 32, // 悬浮按钮高度
          gapWidth: 0,    // 距离左右两边距离     
          coefficientHeight: 0.6,  // 从上到下距离比例
    
    
        }
      },
      props: {
    
      },
      computed: {
    
    
    
      },
      created() {
        // console.log('屏幕宽度', document.documentElement.clientWidth)
        // console.log('屏幕高度度', document.documentElement.clientHeight)
        let type = navigator.userAgent;
    
        // console.log('设备', type)
    
        this.clientWidth = document.documentElement.clientWidth
        this.clientHeight = document.documentElement.clientHeight
        this.left = this.clientWidth - this.itemWidth - this.gapWidth - 20;
        this.top = this.clientHeight * this.coefficientHeight
      },
      watch: {
        left(n, o) {
          //   console.log('新->', n, ';旧->', o)
    
        }
      },
      methods: {
        onBtnClicked() {
          // this.$emit("onFloatBtnClicked")
          if (this.text == '联系我们' && this.isShort == true) {
            this.itemWidth =  isPad()? 340 : 250;
            this.isShort = false;
            this.text = "请联系您的专属客户经理:13456789099";
          } else if (this.isShort == false) {
            this.itemWidth =isPad()? 90 : 70;
            this.isShort = true;
             this.text = "联系我们";
          }
    
        },
        handleScrollStart() {
          console.log('这是啥时候触发呀?ScrollStart')
          this.timer && clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.handleScrollEnd()
          }, 300)
          this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
          if (this.left > this.clientWidth / 2) {
            this.left = this.clientWidth - this.itemWidth / 2
          } else {
            this.left = -this.itemWidth / 2
          }
        },
        handleScrollEnd() {
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
          if (scrollTop === this.currentTop) {
            if (this.left > this.clientWidth / 2) {
              this.left = this.clientWidth - this.itemWidth - this.gapWidth
            } else {
              this.left = this.gapWidth
            }
            clearTimeout(this.timer)
          }
        }
      },
      mounted() {
        this.$nextTick(() => {
          const floatButton = this.$refs.floatButton
          floatButton.addEventListener("touchstart", () => {
            floatButton.style.transition = 'none'
          })
    
          // 在拖拽的过程中,组件应该跟随手指的移动而移动。
          floatButton.addEventListener("touchmove", (e) => {
            // console.log('移动中', e)
            if (e.targetTouches.length === 1) {         // 一根手指
              let touch = e.targetTouches[0]
              this.left = touch.clientX - 20
              this.top = touch.clientY - 25
            }
    
          })
    
          // 拖拽结束以后,重新调整组件的位置并重新设置过度动画。
          floatButton.addEventListener("touchend", () => {
            floatButton.style.transition = 'all 0.3s'
            console.log('拖拽结束后left', this.left)
            if (this.left > document.documentElement.clientWidth / 2) {
              this.left = document.documentElement.clientWidth - this.itemWidth - 20;
    
            } else {
              this.left = 0
            }
          })
        })
      },
      beforeDestroy() {
        // 添加监听页面滚动
        window.removeEventListener('scroll', this.handleScrollStart)
      },
      destroyed() { }
    }
    </script>
    <style lang="less">
    .float_button {
      .float_info {
        box-shadow: #1666ca;
        transition: all 0.3s;
        position: fixed;
        bottom: 436px;
        right: 0;
        margin: 5px 10px;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        z-index: 999;
        background: #1666ca;
        background-color: rgba(22, 102, 202, 0.6);
        border-radius: 10px;
        cursor: pointer;
        .text {
          font-size: 12px;
          color: #fff;
        }
      }
    }
    </style>

     

    展开全文
  • vue 手机菜单

    2021-01-18 09:59:31
    path:'/appDownload' }, // { // name:'渔界咨询' // }, { name:'视频中心', path:'/appDownload' } ] }, ] } }, methods:{ //手机菜单切换颜色 toggle (index) { this.checkindex = index }, //点击展开折叠菜单...
            <ul id="menu" class="header-nav-m-wrapper collapse"> 
                <ul class="asideMenu"> 
                  <li v-for="(item,index) in menuList" :key="index"> 
                    <div class="oneMenu" @click="showToggle(item,index)"> 
                      <img v-bind:src="item.imgUrl" /> 
                      <span id="names"  @click="toggle(index)" :class="{'active':index ==checkindex }">
                          {{ item.name }}
                      </span> 
                    </div> 
                    <ul v-show="item.isSubShow" class="oneMenuChilds"> 
                      <li v-for="subItem in item.subItems" :key="subItem.index" class="oneMenuChild"> 
                        <router-link :to="subItem.path" v-if="subItem.path!=undefined" class="monicker">
                            <!--先渲染页面再跳转 所以v-if="subItem.path!=undefined"-->
                            {{ subItem.name }}
                        </router-link>
                      </li> 
                    </ul> 
                  </li> 
                </ul> 
            </ul>
    data() {
        return { 
            checkindex: 0, // 初始化第一个栏块高亮
         menuList:[ 
             { 
              name:'首页', 
              isSubShow:false, 
              subItems:[ 
               { 
                name:'赛事中心',
                path:'/appDownload'
               }, 
               { 
                name:'钓点推荐',
                path:'/appDownload'
               }, 
              //  { 
              //   name:'渔界咨询'
              //  }, 
               { 
                name:'视频中心',
                path:'/appDownload'
               } 
              ] 
             }, 
         ]
        }
    },
    methods:{
        //手机菜单切换颜色
        toggle (index) {
          this.checkindex = index
        },
        //点击展开折叠菜单事件 
        showToggle(item,ind){ 
          this.menuList.forEach(i => { 
          // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false 
          if (i.isSubShow !== this.menuList[ind].isSubShow) { 
            i.isSubShow = false; 
          } 
        }); 
        item.isSubShow = !item.isSubShow; 
        console.log(item.name) 
       }, 
    }
      .active {
        color: #6C98FE;
        font-weight: bold;
      }

     

    展开全文
  • 在电脑上调试没有出现路由跳转闪动,但发布成app在手机上就出现了闪动的情况,这是什么原因呢
  • vue实现顶部菜单

    2021-01-18 16:59:33
    vue实现顶部菜单栏,同一个页面两个菜单按钮之间的切换 先看展示结果: 点击第一个按钮,显示内容1 点击第二个按钮,展示内容2 下面上源码:注意哦,一定要代码规划,别学我(⊙o⊙) ...
  • 本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果,代码很简单,感兴趣的朋友跟随脚本之家小编一起看看吧
  • vue中移动手风琴组件 Vue手风琴菜单 (vue-accordion-menu) Simple accordion menu component in Vue 2. Vue 2中的简单手风琴菜单组件。 现场演示 (Live Demo) ...

    vue中移动端手风琴组件

    Vue手风琴菜单 (vue-accordion-menu)

    Simple accordion menu component in Vue 2.

    Vue 2中的简单手风琴菜单组件。

    现场演示 (Live Demo)

    https://weichiachang.github.io/vue-accordion-menu/dist/

    https://weichiachang.github.io/vue-accordion-menu/dist/

    安装 (Installation)

    npm install --save vue-accordion-menu

    默认导入 (Default import)

    Install all the components:

    安装所有组件:

    import Vue from 'vue'
    import VueAccordionMenu from 'vue-accordion-menu'
    
    Vue.use(VueAccordionMenu)

    Use specific components:

    使用特定的组件:

    import Vue from 'vue'
    import { AccordionMenu } from 'vue-accordion-menu'
    
    Vue.component('AccordionMenu', AccordionMenu)

    ⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

    import️导入软件包时包含一个css文件。 您可能需要设置捆绑程序才能将CSS嵌入到页面中。

    翻译自: https://vuejsexamples.com/a-simple-accordion-menu-component-in-vue-2/

    vue中移动端手风琴组件

    展开全文
  • 主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍,后面对用到的知识点总结,需要的朋友可以参考下
  • 手机端当右边商品滚动到对应最后一个菜单“特色粥品”(超出屏幕长度隐藏的菜单),左边对应菜单栏仍隐藏不可见。如下图: 解决办法: 仿照点击菜单项右边商品栏滚动到对应位置的方法: (1)在li的class添加menu-...
  • //安装 $ npm install awe-dnd --save...//在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd' Vue.use(VueDND) //vue文件中引用 <script> export default { data () { return { colors: [...
  • vue-admin是一款比较常用的vue开源项目,下面是根据自己的需求使其增加mobile 的ui 1.我使用的是vue-admin-template来进行修改的,因为相对的饿了么的组件较少好修改一些,下面是下载项目 git clone ...
  • vue滑动页面菜单栏置顶

    千次阅读 2018-07-24 13:24:58
    在pc端是流畅的,但是手机端有问题:滑动到顶部之后,菜单栏才会停留在预定位置。 原因是pc上的浏览器JS轮询50毫秒以下,手机浏览器JS轮询因为省电及其他原因,降到1S甚至更高。 所以添加属性:  position: ...
  • cnpm install vue-fkl-sideslip // 或者npm // 引入 import vueSideslip from 'vue-fkl-sideslip' import 'vue-fkl-sideslip/lib/vue-fkl-sideslip.css' Vue.use(vueSideslip); // 调用 <vue-sideslip @click=...
  • vue.js点餐智能点餐app手机触屏滑动分类菜单切换代码,代码简单,修改方便!分享给大家,样式效果大家一定是需要的
  • 二、Js created(){ if (this._isMobile()) { //手机端 this.ismOrpc = 'Moperation' //设置rem window.onload = function(){ getRem(750,100) }; window.onresize = function(){ getRem(750,100) }; function ...
  • vue是现在流行的前端框架,对应的也诞生了许多vue对应的皮肤组件库,手机端和网页端都出现很多可以供vue使用的组件库 下面抽两个组件库讲一下和vue的整合步骤 element-ui element-ui官方文档 安装 npm i element-...
  • 主要为大家详细介绍了vue.js实现三级菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • ThinkPhp6+Vue前后分离后台管理系统

    千次阅读 2020-11-15 19:57:03
    RXThinkCMF_EVL8_PRO前后端分离开发框架是基于 Laravel8+ElementUI+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的...
  • ThinkPhp6.x+AntDesign+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的权限架构体系以及常规基础模块:用户管理、...
  • Spring Boot+Spring Security+Vue的前后分离的的RBAC权限管理系统Pre系统介绍Pre基于Spring Boot 、Spring Security 、Vue的前后分离的的RBAC权限管理系统,项目支持数据权限管理,支持后端配置菜单动态路由, 第...
  • RXThinkCMF_EVL8_PRO前后端分离开发框架是基于 Laravel8+ElementUI+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的...
  • Laravel8.x+AntDesign+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的权限架构体系以及常规基础模块:用户管理、角色...
  • Bootstrap手机端下拉菜单(铺满)

    千次阅读 2016-11-11 21:27:57
    Bootstrap下拉菜单铺满
  • 在我们做管理后台亦或是产品流程时,总是需要一个菜单栏或者导航栏来架起我们的产品架构,那么,如何用vue实现侧边折叠导航栏呢?接下来将一一介绍。 请先看效果演示图。 步骤1:先架构整个页面的布局,撰写...
  • Laravel8.x+AntDesign+Vue前后分离快速开发平台

    千次阅读 热门讨论 2021-05-06 20:43:25
    Laravel8.x+AntDesign+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的权限架构体系以及常规基础模块:用户管理、角色...
  • 上篇我们通过vue实现了后端系统的导航栏,Spring Boot + Vue前后分离(七)后端系统,功能导航页,通过导航栏可以看到后期我们要做的功能,后面我们会按照这些功能一步一步的完善该系统,到这里我们界面性的操作...
  • <el-cascader v-model="dataForm.catelogPath" :options="categorys" :props="props" filterable placeholder="试试搜索:手机"></el-cascader>
  • RXThinkCMF_EVL8_PRO前后端分离开发框架是基于 Laravel8+ElementUI+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的...
  • Laravel8.x+AntDesign+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的权限架构体系以及常规基础模块:用户管理、角色...
  • ThinkPhp6.x+AntDesign+Vue 开发的权限架构及内容管理框架,采用全新的前端UI框架,支持多主题切换,前端UI框架完全适配手机端、PAD终端以及PC电脑终端,框架内置完整的权限架构体系以及常规基础模块:用户管理、...

空空如也

空空如也

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

vue手机端菜单

vue 订阅