zoukankan      html  css  js  c++  java
  • 实现自定义的小程序底部tabbar

    背景

    诶,当然是为了实现更有温度的代码啦(背后设计师拿着刀对着我)

    图片描述

    自带tabbar

    app.json中配置:

    tabBar: {
      backgroundColor: '#fff',
      borderStyle: 'white',
      color: '#333',
      selectedColor: '#333',
      list: [
        {
          pagePath: 'pages/index',
          text: '活动首页',
          iconPath: 'resource/images/home.png',
          selectedIconPath: 'resource/images/home-active.png'
        },
        {
          pagePath: 'pages/my',
          text: '我的',
          iconPath: 'resource/images/my.png',
          selectedIconPath: 'resource/images/my-active.png'
        }
      ]
    }

    诞生了这个,图标尺寸81*81,不支持svg跟字体图标。
    图片描述

    设计师看了想砍人系列
    图片描述

    自定义tabbar

    刚开始的实现思路:

    不配置原生tabbar,采用了navigateTo跟navagateBack
    图片描述

    【图片如侵删】
    虽然达到了自定义样式的效果,但是有两个缺点:只是单纯的导航,失去tab效果;超过两个tab就难了。

    过了一段时间,吃饭的时候猛地想到以下思路:

    配置原生tabbar,也编写自定义tabbar,如下:
    图片描述

    自定义tabbar使用wx.switchTab切换,但onLoad时使用wx.hideTabBar()隐藏掉原生款。bingo!
    现在既继承了原生tab的效果,又可以使用字体图标跟svg,还可以加些有温度的小玩意。
    图片描述

    最后

    mark一个小问题:同时使用wx.showToast跟下拉刷新wx.startPullDownRefresh会导致下拉刷新的三点动画异常,-_-||还以为是被我俩个tabbar撑到了。

  • 相关阅读:
    Java代理模式精讲之静态代理,动态代理,CGLib代理
    Java文件编译与反编译:javac命令和javap命令
    CAS机制总结
    try-catch-finally 与返回值的修改
    不同分布式锁的实现
    缓存算法(页面置换算法)-FIFO、LFU、LRU
    多线程的线程开销
    谈谈如何来查看GC日志
    JVM中常见的垃圾收集器
    前端大牛 博客集
  • 原文地址:https://www.cnblogs.com/10manongit/p/12707628.html
Copyright © 2011-2022 走看看