精华内容
下载资源
问答
  • 小程序自定义tabbar

    2021-07-29 19:39:19
    小程序自定义tabbar   微信官方小程序自定义tabbar 1. 配置信息   [在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。 "tabBar": { "custom": true, "color": "#a9b7b7", ...

    小程序自定义tabbar

      微信官方小程序自定义tabbar

    1. 配置信息

      在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。可以去掉list不影响,但是tabBar这个配置一定要保留,基本里面是空,也要保留,不然自定义的tabbar不会出现在页面中。

     "tabBar": {
        "custom": true,
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle": "black" ,
        "list": [{
          "selectedIconPath": "images/tabs/home-active.png",
          "iconPath": "images/tabs/home.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "selectedIconPath": "images/tabs/message-active.png",
          "iconPath": "images/tabs/message.png",
          "pagePath": "pages/message/message",
          "text": "消息页"
        },{
          "selectedIconPath": "images/tabs/contact-active.png",
          "iconPath": "images/tabs/contact.png",
          "pagePath": "pages/concact/concact",
          "text": "联系页"
        }
      ]
    },
    

    2. 添加 tabBar 代码文件

      1) 从官网下载案例,如下:
    在这里插入图片描述
      2) 下载后的代码如下
    在这里插入图片描述
      3) 接着把custom-tab-bar整个文件拷贝到你的项目下:
    在这里插入图片描述
      4) 修改custom-tab-bar/index.js的文件
    在这里插入图片描述

      data: {
        selected: 0,
        color: "#7A7E83",
        selectedColor: "#3cc51f",
        list: [{
          pagePath: "/pages/index/index",
          selectedIconPath: "/images/tabs/home-active.png",
          iconPath: "/images/tabs/home.png",
          text: "首页"
        }, {
          pagePath: "/pages/message/message",
          selectedIconPath: "/images/tabs/message-active.png",
          iconPath: "/images/tabs/message.png",
          text: "消息"
        }
        , {
          pagePath: "/pages/concact/concact",
          selectedIconPath: "/images/tabs/contact-active.png",
          iconPath: "/images/tabs/contact.png",
          text: "联系"
        }
      ]
      }
    

      到此运行代码之后会发现:tabbar图标切换 要点击两次才能有选中状态

      原因:切换每个页面的selected未修改,可继续借鉴custom-tab-bar案例,案例里面的两个页面还有这段代码:

    Component({
      pageLifetimes: {
        show() {
          if (typeof this.getTabBar === 'function' &&
            this.getTabBar()) {
            this.getTabBar().setData({
              selected: 1
            })
          }
        }
      }
    })
    

      所以解决方法,在我们的页面里面也添加show方法改变selected

    onShow: function () {
        if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
          this.getTabBar().setData({
            selected: 2
          })
        }
      }
    

      最终切换效果正常:
    在这里插入图片描述

    展开全文
  • 微信小程序自定义 tabBar微信小程序自定义 tabBar先简单介绍一下微信官方提供的自定义tabBar 的用法实际使用中出现问题?自助自定义tabBar组件实现custom-tab-bar 代码页一起奉上 微信小程序自定义 tabBar 基础库 ...

    微信小程序自定义 tabBar

    基础库 2.5.0 开始支持,低版本需做兼容处理。
    微信小程序基础库 2.5.0 开始微信官方开放自定义底部 tabBar 组件 。主要是为了让开发者可以更加灵活地设置 tabBar 样式,以满足更多个性化的场景。但是在实际开发者使用微信官方提供的组件 , 适配和兼容并不感人 , 让人从满怀希望到绝望 ;

    先简单介绍一下微信官方提供的自定义tabBar 的用法

    在 app.json 中的 tabBar 项指定 custom (布尔值)字段,在所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。在根目录下创建custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss具体页面代码不在书写 , 可在 tabBar 组件底部示例代码中点击 在开发者工具中预览效果 在编辑器中拷贝相关代码即可;

    实际使用中出现问题?
    在使用官方提供的自定义tabBar 组件中 , 点击切换tabBar时 , 点击切换选中的状态一直是上一次(上一个tabBar)点击的tabBar , 并且首次点击切换到其他tabBar页是会有闪烁现象 ; 在微信社区和博客中尝试很多方法 , 都没有能解决问题 , 最后不得放弃使用 , 自己从新自定义一个tabBar组件 ;

    自助自定义tabBar组件实现

    1.在app.js中 onLaunch 中 调用 wx.hideTabBar() 方法隐藏tab , 或者在第2步新建的 custom-tab-bar目录中index.js生命周期attached中调用 wx.hideTabBar() 方法隐藏tab; 注意基础库 1.9.0开始支持 , 全局变量globalData 中增加 selectedIndex:0 ;
    2. 新建components目录 , 在components目录中创建 custom-tab-bar目录 custom-tab-bar目录中分别新建index.wxml , index.js ,index.json , index.wxss页面 ; 注意要在index.json 设置 component": true;
    3. 在tabBar页面中引用组件 .json页中设置 "usingComponents": { "custom-tab-bar": "/components/custom-tab-bar/index" }
    4. .wxml页面中使用 tabBar组件<custom-tab-bar></custom-tab-bar>

    custom-tab-bar 代码页一起奉上

    index.wxml页面

    <cover-view class="tab-bar" style="background:{{items.style.background}}">
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{{items.data}}" wx:key="*this" class="tab-bar-item" data-path="{{item.linkUrl}}" data-index="{{index}}" bindtap="switchTab" wx:for-index="index">
        <cover-image src="{{selected === index ? item.select_imgUrl : item.default_imgUrl}}"></cover-image>
        <cover-view style="color: {{selected === index ? item.select_color : item.color}}">{{item.text}}</cover-view>
      </cover-view>
    </cover-view>
    

    index.wxss页面

    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: white;
      display: flex;
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .tab-bar-border {
      background-color: rgba(0, 0, 0, 0.33);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    
    .tab-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .tab-bar-item cover-image {
      width: 27px;
      height: 27px;
    }
    
    .tab-bar-item cover-view {
      font-size: 10px;
    }
    
    

    index.js页面

    const App = getApp();
    Component({
      lifetimes: {
        attached: function () {
          wx.hideTabBar();
          this.getTab();
        },
        ready: function () {
          this.setData({
            selected: App.globalData.selectedIndex
          });
        }
      },
      
      data: {
        selected: 0, // 当前 tabBar 索引 
        color: "#6e6d6b",
        selectedColor: "#fd4a5f",
        borderStyle: "black",
        backgroundColor: "#ffffff",
        items: [], //.wxml items 渲染数据
        //tabBar items(如下list字段)示例
        list: {
        	data:[{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/202102021028438faa49673.png"
    			linkUrl: "pages/index/index"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/2021020210284341feb1488.png"
    			text: "首页"
    		},{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/20210202102843feecc5864.png"
    			linkUrl: "pages/customtabbar/index?page_id=10125"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/202102021028438b66c5733.png"
    		},{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/20210202102843468f98837.png"
    			linkUrl: "pages/flow/index"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/20210202102843559327043.png"
    			text: "购物车"
    		},{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/202102021028438faa49673.png"
    			linkUrl: "pages/user/index"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/2021020210284341feb1488.png"
    			text: "我的"
    		}],
    		name: "导航组",
    		type: "navBar",
    		style: {
    			background: "#ffffff"
    			rowsNum: "4"
    		}
        }
      },
      methods: {
      	/**
         * tabBar切换
         */
        switchTab(e) {
          const data = e.currentTarget.dataset;
          const url = data.path;
          App.navigationTo(url);
          App.globalData.selectedIndex = data.index;
        },
        /**
         * 后台接口获取tabBar数据
         */
        getTab(){
          let _this = this;
          App._get('page/nav', {}, function(res) {
            const items = res.data.items;
            _this.setData({items})
          });
        }
      }
    })
    

    index.json页面

    {
      "component": true
    }
    

    注:实际项目中使用点击切换tabBar时会项存item下标指向问题,需要结合自己的项目数据结构做js逻辑处理显示(后续完整解决方法会文章形式补充~~)

    好用 , 方便点下收藏 , 不迷路 ! ! !

    展开全文
  • 小程序自定义tabBar

    万次阅读 2019-06-10 14:56:08
    很多时候,小程序自带的tabBar不能够满足项目需求,这个时候就需要我们自定义tabBar了。但是在网上找了很久,基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始,可以官方使用自定义tabBar了。 2、自定义...

    1、前言

    很多时候,小程序自带的tabBar不能够满足项目需求,这个时候就需要我们自定义tabBar了。但是在网上找了很久,基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始,可以官方使用自定义tabBar了。

    2、自定义tabBar样式

    如下图所示,我们需要一个展示“首页”、“我的”,和一个可以点击跳转到发布的tabBar。这种样式,原生的就无法满足需求了,只能自定义tabBar了。
    自定义tabBar

    3、引入custom-tab-bar及相关配置

    3.1、如下图所示,将custom-tab-bar【下载】导入项目根目录,
    在这里插入图片描述
    3.2、在app.json中配置好切换的tabbar,并设置"custom": true,然后将基础库设置成2.5.0
    在这里插入图片描述
    3.3、使用自定义TabBar,在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0,我的中设置 selected: 2。因为 selected: 1 是特殊跳转,点击加号图标时,不再是切换tabbar,而是直接跳转发布界面了。

    /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          console.log('设置选中项 0')
          this.getTabBar().setData({
            selected: 0
          })
        }
      },
    

    4、完整Demo

    真机测试可用,使用也非常的简单。【完整Demo下载地址】

    本人公众号,关注一波,共同交流吧。
    在这里插入图片描述

    展开全文
  • 小程序 自定义 tabBar

    2021-04-10 11:53:59
    1、自定义tabBar 的一般实现步骤 自定义 tabBar 分为 3 大步骤,分别是: ① 配置信息 在 app.json 中的 tabBar 项指定 custom 字段,“custom”:ture 在项目根目录下创建custom-tab-bar文件夹, 并创建index组件 {...

    tabBar

    自定义 tabBar

    1、自定义tabBar 的一般实现步骤

    自定义 tabBar 分为 3 大步骤,分别是:

    ① 配置信息

    在 app.json 中的 tabBar 项指定 custom 字段,“custom”:ture
    在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

    { 
    "tabBar"{
    	"custom":true   // 必填
    	"color": "#000000", 
    	"selectedColor": "#000000",
    	 "backgroundColor": "#000000", 
    	 "list": [{ 
    	     "pagePath": "page/component/index", 
    	     "text": "组件" 
    	 },
    	  {
    	    "pagePath": "page/API/index", 
    	    "text": "接口" 
    	   }] 
    	  },
    	  "usingComponents": {} }
       }
    }
    

    ② 添加 tabBar 代码文件

    在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

    custom-tab-bar/index.js 
    custom-tab-bar/index.json 
    custom-tab-bar/index.wxml 
    custom-tab-bar/index.wxss
    

    ③ 编写 tabBar 代码

    用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar
    接口,可获取当前页面下的自定义 tabBar 组件实例。

    2、基于vant-weapp 组件库来渲染底部tabbar

    • 在 app.json/index.json 文件中,注册组件
       "usingComponents": { 
          "van-tabbar": "@vant/weapp/tabbar/index", 
          "van-tabbar-item": "@vant/weapp/tabbar-item/index" 
        }
    
    • 在组件的 wxml 文件中使用组件
    <van-tabbar active="{{ active }}" bind:change="onChange"> 
       <van-tabbar-item info="3"> 
           <image slot="icon" 
           src="/images/tabs/home.png" 
           mode="aspectFit" 
           style="width: 25px; height: 25px;"
          />
          <image slot="icon-active" 
          src="/images/tabs/home-active.png" 
          mode="aspectFit" 
          style="width: 25px; height: 25px;" 
          />自定义 
        </van-tabbar-item> 
    </van-tabbar>
    
    • 组件 js 文件中,书写逻辑
    Page({  
         data: {
              active: 0, 将app.json的中的tabBar的list节点的内容粘贴过来 
              循环遍历生成tabbar,也可以手动绘制tabbar,直接使用sum 
         },
          onChange(event) { 
          // event.detail 的值为当前选中项的索引 
          this.setData({ active: event.detail }); 
          }, 
       });
    
    • 重置 vant 组件库的样式
    .van-tabbar-item { 
         重置css变量的值为0 --tabbar-item-bottom(0) 
    }
    // 样式不生效,需要在组件的js文件中,添加解除样式隔离的配置
     Component({ 
         options: { 
         // 解除样式隔离 styleIsolation: 'shared' 
         } 
     })
    
    • 渲染数组徽标

    可以将三个tabbar手动渲染出来,不使用循环遍历生成

    • 在 tabbar 组件中使用 store 中的数据
    1.导入mobx第三方包,导入store 
    2.使用behavior挂载按需加载的第三方包的方法`storeBindingsBehavior`
    3.进行数据的绑定
    //添加数据绑定节点
    storeBindings:{
      store,
        fields:{
              sum:'sum'
        },
        actions:{
          
        }
    },
    4.监听sum的变化,当变化的时候为info赋值//添加侦听器节点
    observers:{
      'sum':function(val){
        this.setData({
          sum:val 
        })
      }
    }
    5.在组件的js文件中处理tabbar的change事件
    onChange(e){
       //e.detail的值为当前选中项的索引
      this.setData({active:e.detail})
      wx.switchTab({
        //这个url必须以/根路径开头 
        url:this.data.list[e.detail].pagePath 
      })
    }
    6.将组件内部的数据声明移除掉,声明在store中
    -由于van-tabbar组件内部修改了active的值而我们通过change事件也去修改了active的值,
    使tabbar的展示出现了bug
    
    -**解决办法:将数据放在容器中,通过映射去使用容器的数据和修改数据的方法**
    
    //store.js中
    exportconststore=observable({
      numA:1,
      numB:2,
      activeTabBarIndex:0,
      getsum(){
        returnthis.numA+this.numB 
      }
      //定义actives方法,用来修改store中的数据 
      ...
      updateActiveTabBarIndex:active(function(index){  this.activeTabBarIndex=index 
    })
    })
    //组件的index.js中
    Component({
      //将容器中的方法挂载在behaviors节点??
      behaviors:['storeBindingsBehavior'],
      storeBindings:{
        //指定使用的容器
        store,
        //容器中的数据 
        fields:{
          sum:'sum',
          active:'activeTabBarIndex'    },
        //容器中修改数据的方法
        actions:{
        //自定义方法:'容器中的方法'
          updateActive:'updateActiveTabBarIndex'    }
          },
      methods:{
        onChange(e){
           //e.detail的值为当前选中项的索引
          //this.setData({active:e.detail})
          //使用容器中的方法,更新active的值
          this.updateActive(e.detail)      //实现tabbar的跳转 
          wx.switchTab({
          //这个url必须以/根路径开头 
          url:this.data.list[e.detail].pagePath
          })
         } 
       }
    })
    
    展开全文
  • 小程序 自定义tabbar

    千次阅读 2018-12-11 11:08:02
    小程序用的人变得多了,然后原先的底部tabbar不满足大家的需求,有的嫌弃图片或者字体太大,或者添加一些别的需求,今天给大家带来自定义tabbar。  在我看来微信想要做到自定义tabbar有很多办法,比如一(例如有三...
  • 微信小程序自定义tabBar

    万次阅读 2019-07-17 10:47:41
    本文分享一下微信小程序自定义tabBar的几种实现方式。
  • 小程序 自定义tabBar

    2020-11-03 14:22:32
    app.json 加入 tabBar 属性中添加 "custom": true, 在代码根目录下添加入口文件: custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss tabBar 点击元素初始...
  • 主要为大家详细介绍了微信小程序自定义tabBar组件开发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 小程序自定义TabBar

    2020-01-27 20:39:20
    1、设置小程序tabBar时,tabBar不显示,app.json中的配置如下: { "pages": [ "pages/index/index", "pages/scaner/scaner", "pages/personal/personal", "pages/logs/logs" ], "window": { ...
  • tabBar 微信小程序自定义tabBar tabBar兼容 微信小程序tabBar兼容低版本 自定义组件tabBar 自定义tabBar
  • wx-mina-custom-tabbar 微信小程序自定义tabbar,包含可左右滚动。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,590
精华内容 2,636
关键字:

小程序自定义tabbar