首页 > 微信 > 详细

小程序实现自定义底部导航栏-横竖双列切换

时间:2021-09-08 14:49:33      阅读:8      评论:0      收藏:0      [点我收藏+]

?小程序实现自定义底部导航栏


很多时候,微信原生的底部导航栏不能满足我们的开发需求,因此封装一个适合自己的底部导航栏组件十分重要。


如何自己封装? 我们可以利用 navigator 组件 来实现。


效果图 横竖双列


技术分享图片


技术分享图片


可动态设置:


导航栏背景、文字大小、文字选中颜色、文字本身颜色、导航栏动态渲染、图标和文字竖排和横排切换


组件属性


/**
   * 组件的属性列表
   */
  properties: {
    // 导航栏背景颜色
    backgrounds: {
      backgrounds: String,//类型
      value: ‘#fbfbfb‘//默认值
    },
    // 文字原生颜色
    color: {
      color: String,
      value: ‘black‘
    },
    // 文字选中样式
    selectedColor: {
      selectedColor: String,
      value: ‘#22a6b3‘
    },
    // 文字大小默认为28rpx 单位为rpx
    fontSize: {
      fontSize: String,
      value: ‘28‘
    },
    // 选中的下标
    selected: {
      selected: Number,
      value: 0
    },
    // 默认0 图标和文字并行 1 文字在图标下面
    type: {
      selected: Number,
      value: 0
    },
     // 若想要动态设置底部导航栏,则将下面代码解除注释
     // navList: {
     //   navList: Array,
     //   value: [] , //  初始化底部导航栏
     // }
  },

默认初始值


navList 是对底部导航栏的初始化


/**
   * 组件的初始数据
   */
  data: {
    navList: [{
      "pagePath": "/pages/main/index",
      "text": "拼车",
      "iconPath": "/icons/car.png",
      "selectedIconPath": "/icons/car_click.png"
    },
    {
      "pagePath": "/pages/search/index",
      "text": "搜索",
      "iconPath": "/icons/search.png",
      "selectedIconPath": "/icons/search_click.png"
    },
    {
      "pagePath": "/pages/order/index",
      "text": "订单",
      "iconPath": "/icons/order.png",
      "selectedIconPath": "/icons/order_click.png"
    },
    {
      "pagePath": "/pages/my/index",
      "text": "个人中心",
      "iconPath": "/icons/my.png",
      "selectedIconPath": "/icons/my-click.png"
    }
   ],
  },


与此对应的是:app.json里面 需要 将 tabBar 的 custom属性设置为 true


"tabBar": {
    "custom": true,
    "color": "#999",
    "selectedColor": "#22a6b3",
    "backgroundColor": "#f3fbfb",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/main/index",
      "text": "拼车",
      "iconPath": "./icons/car.png",
      "selectedIconPath": "./icons/car_click.png"
    },
    {
      "pagePath": "pages/search/index",
      "text": "搜索",
      "iconPath": "./icons/search.png",
      "selectedIconPath": "./icons/search_click.png"
    },
    {
      "pagePath": "pages/order/index",
      "text": "订单",
      "iconPath": "./icons/order.png",
      "selectedIconPath": "./icons/order_click.png"
    },
    {
      "pagePath": "pages/my/index",
      "text": "个人中心",
      "iconPath": "./icons/my.png",
      "selectedIconPath": "./icons/my-click.png"
    }
   ]
  },

编写 组件 wxml


<!--components/menuBtn/menuBtn.wxml-->
<view class="tabs enHigh" style=" background: {{ backgrounds }}; color: {{color}}; " >
  <view class="meunBtn" style="font-size: {{fontSize}}rpx;" wx:for="{{navList}}" wx:key="index">
    <navigator url="{{item.pagePath}}" class="nav {{type == 1 ? ‘column‘ : ‘‘}}" open-type="switchTab" hover-class="none">
      <view class="left">
        <image src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></image>
      </view>
      <view style="color: {{selected == index ? selectedColor : color}};{{ type == 1 ? ‘margin-top:2rpx‘ : ‘margin-left: 4rpx;‘}}">{{item.text}}</view>
    </navigator>
  </view>
</view>


使用组件


在xxx.json中


{
  "usingComponents": {
    "menuBtn": "/components/menuBtn/menuBtn"
  }
}

xxx.wxml


<menuBtn selected="0"></menuBtn>

源码下载


demo演示: 该仓库将不定期更新其他组件~


github


gittee


小程序实现自定义底部导航栏-横竖双列切换

原文:https://www.cnblogs.com/Jlay/p/self_navigator.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!