精华内容
下载资源
问答
  • Tabbar

    2021-04-03 17:39:09
    tabbar案例 运行效果 实现步骤 在终端执行vue create Tabbar命令,创建一个Tabbar文件夹,并在Components文件夹下新建tabbar文件夹. 自定义TabBar组件,在App中使用 让TabBar处于底部,并且设置相关的样式 <...

    tabbar案例

    运行效果

    在这里插入图片描述

    实现步骤

    1. 在终端执行vue create Tabbar命令,创建一个Tabbar文件夹,并在Components文件夹下新建tabbar文件夹.
      在这里插入图片描述

    2. 自定义TabBar组件,在App中使用
      让TabBar处于底部,并且设置相关的样式

    <template>
    // 定义插槽 使得TabBar中显示的内容由外界决定
       <div id="tab-bar">
         <slot></slot>
        </div>
    </template> 
    
    <script>
    export default {
      name:'TabBar'
    }
    </script>
    
    <style>
    // flex布局平分TabBar
    #tab-bar{
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #f6f6f6;
      box-shadow: 0px -3px 1px rgba(100, 100, 100, .1);
    }
    </style>
    
    1. 自定义TabBarItem,可以传入图片和文字
    <template>
    // 定义TabBarItem,并且定义三个插槽:图片,文字和活跃状态
      <div class="tab-bar-item" @click="itemClick">
      //  给插槽外层包装div,用于设置样式
        <div v-if="!isActive"><slot name="item-icon"></slot> </div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div :style="activeStyle">
          <slot name="item-text"></slot>
        </div>
      </div>
    </template>
    <script>
    export default {
       name:'TabBarItem',
       props:{
         path:String,
         activeColor:{
           type:String,
           default:'red'
         }
         },
      data(){
        return {
           
        }
      },
      methods:{
        itemClick(){
          this.$router.push(this.path)
          console.log('itemclick');
        }
      },
        computed:{
         isActive(){
           // 表示与当前活跃路由的path路径是否相等 返回布尔值 
           return this.$route.path.indexOf(this.path)!==-1
         },
         activeStyle(){
           return this.isActive?{color:this.activeColor}:{}
         }
       }
       }
    </script>
    <style>
    .tab-bar-item{
      flex:1;
      text-align: center;
      height: 49px;
      font-size:14px;
    }
    .tab-bar-item img{
        width:24px;
        height: 24px;
        vertical-align: middle;
    }
    .tab-bar-item  .home{
        margin-top: -35px;
    }
    </style>
    
    1. 填充插槽,实现底部TabBar的效果
    <template>
      <div id="app">
        <router-view></router-view>
       <tab-bar>
         <tab-bar-item path="/home" activeColor="blue">
            <img slot="item-icon" src="./assets/image/tabbar/_home.png" alt="">
            <img slot="item-icon-active" src="./assets/image/tabbar/home.png" alt="">
            <div slot="item-text">首页</div>
         </tab-bar-item>
         <tab-bar-item path="/profile" activeColor="#f00">
            <img slot="item-icon" src="./assets/image/tabbar/_my.png" alt="">
             <img slot="item-icon-active" src="./assets/image/tabbar/my.png" alt="">
            <div slot="item-text">我的</div>
         </tab-bar-item>
         <tab-bar-item path="/pict" activeColor="lightblue">
            <img slot="item-icon" src="./assets/image/tabbar/_search.png" alt="">
             <img slot="item-icon-active" src="./assets/image/tabbar/search.png" alt="">
            <div slot="item-text">搜索</div>
         </tab-bar-item>
         <tab-bar-item path="/videos" activeColor="pink">
            <img slot="item-icon" src="./assets/image/tabbar/_videocamera.png" alt="">
             <img slot="item-icon-active" src="./assets/image/tabbar/videocamera.png" alt="">
            <div slot="item-text">影音</div>
         </tab-bar-item>
       </tab-bar>
      </div>
    </template>
    <script>
    import TabBar from './components/tabbar/TabBar'
    import TabBarItem from './components/tabbar/TabBaritem.vue'
    export default {
      name: 'App',
      components:{
          TabBar,
          TabBarItem
      }
    }
    </script>
    <style>
    @import "./assets/css/base.css";
    </style>
    
    1. 配置路由
      创建views文件夹,在下面分别自定义如下组件
      在这里插入图片描述
    import Vue from 'vue'
    import Router from 'vue-router'
    const Home = ()=> import('../views/home.vue')
    const Profile = ()=> import('../views/profile.vue')
    const Pict = ()=> import('../views/pict.vue')
    const Videos = ()=> import('../views/videos.vue')
    Vue.use(Router)
    // 创建路由对象
    const routes=[
        { 
          // 默认路由为/home
            path:'',
            redirect:'/home'
        },
       {
           path:'/home',
           component:Home
       },
       {
        path:'/profile',
        component:Profile
       },
          {
        path:'/videos',
        component:Videos
      },
       {
        path:'/pict',
        component:Pict
        }
    ]
    // 导出路由对象
    export default new Router({
        routes,
        mode:'history'
    })
    
    1. main.js文件
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    

    bug解决

    我在编辑器书写完代码,进入网页端运行时,都可以实现我想要的效果,但当我多次点击路由时,控制台出现了如下错误:
    在这里插入图片描述

    解决方案

    在index.js中配置如下代码:

      const originalPush = Router.prototype.push
      Router.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    

    然后问题就完美的解决了.

    展开全文
  • tabbar

    2018-11-13 14:57:00
    1 tabbar不显示的问题: 命名在app.json中配置了tabbar但是不显示可能的问题: app.json中的pages中第一个路径没有在tabbar中设置 原因:app.json中配置的pages中的路径信息,第一个路径默认是小程序的开始页面,...

    1 tabbar不显示的问题:

    命名在app.json中配置了tabbar但是不显示可能的问题:

     app.json中的pages中第一个路径没有在tabbar中设置

    原因:app.json中配置的pages中的路径信息,第一个路径默认是小程序的开始页面,tabbar在是页面初始化时渲染的,如果首页不在tabbar中,就无法渲染出来

    2 没有设置在tabbar中的页面也有tabbar:

    在跳转页面时使用redirectTo(与tabbar是同样的效果),使用navigateTo就可以了

    2 tabbar在底部时需要设置iconPath以及selectedIconPath   

    icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效

    3 切换到tabbar中不是首页的页面下拉和空白地方出现首页的内容

    修改window中backgroundColor窗口北京颜色为白色#fff,同时backgroundTextStyle(下拉背景字体、loading图的样式)需要时dark才可以看见(只能是light/dark),如果设置为light与背景色一样就无法看看

     

    转载于:https://www.cnblogs.com/xiaofenguo/p/9952223.html

    展开全文
  • tabBar

    2016-03-04 08:35:33
    由于系统的tabBar向上移动6个点所有要用自定义的tabBar


    由于系统的tabBar向上移动6个点所有要用自定义的tabBar

    高度不能自己设置,图片是灰色的,最多显示5个,多的就会出现more

    自定义后一定要移除系统的tabBar 否则系统的会露出来,高出的部分会被选中


    展开全文
  • 自定义TabBar

    千次下载 热门讨论 2014-06-30 15:06:29
    自定义TabBar例子。
  • 自定义tabBar

    2017-04-27 21:21:18
    自定义tabBar
  • 动态Tabbar

    2018-11-27 20:17:32
    使用KVC方式,动态的设置Tabbar的个数,以实现根据数据动态配置tabbar的效果
  • tabbar控件

    2015-08-07 17:10:15
    tabbar控件 自定义tabbar
  • CustomTabbar 自定义tabbar+tabbarItem动画
  • 自定义tabbar

    2016-01-06 09:44:33
    自定义tabbar 实现各种形式的tabbar样式
  • TabBar Demo

    2016-08-31 15:47:27
    TabBar的使用 demo,oc
  • swiftTabBar

    2015-12-30 17:35:44
    利用swift制作不规则tabbar,可以自己定义主界面,自定义tabbar
  • 主要介绍了微信小程序tabBar 返回tabBar不刷新页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • tabbar.rar

    2019-12-19 09:07:59
    vue开发底部导航菜单tabbar源码完整示例代码vue开发底部导航菜单tabbar源码完整示例代码
  • TabBar.zip

    2020-06-21 22:15:18
    自编的Vue TabBar组件 Tabbar可自定义颜色 自动根据插入内容进行页面排版 插入的内容可自定义图片、颜色、悬停颜色、激活颜色等功能
  • 写项目时遇到一个需求:就是从其他页面点击tabbar组件进入tabbar页面(这里叫他A页面),需要对A页面进行一次刷新。 应用场景:我在分类页面点击加号添加商品到购物车,然后点击tabbar的购物车组件,进入购物车,这...

    写项目时遇到一个需求:就是从其他页面点击tabbar组件进入tabbar页面(这里叫他A页面),需要对A页面进行一次刷新。
    应用场景:我在分类页面点击加号添加商品到购物车,然后点击tabbar的购物车组件,进入购物车,这个时候就要对购物车进行一个刷新。
    为什么呢?因为点击加号后会将该商品信息存入数据库,而购物车信息是从数据库中取出来的,此时要获得最新的购物车的信息就要再对数据库在进行一次新的查询请求,也就是需要页面刷新了。
    处理方法:在购物车的js页面中的onshow方法中加入如下代码

      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        const pages = getCurrentPages()
        const perpage = pages[pages.length - 1]
        perpage.onLoad()  
      },
    
    
    展开全文
  • vue-tabbar 开发一个导航栏组件,主要在移动端使用,可以打开浏览器的手机模式查看。 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for ...
  • qq 的 tabbar 拖动动画效果 qq 的 tabbar 拖动动画效果

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,031
精华内容 5,212
关键字:

tabbar