小程序自定义底部导航栏样式

1.微信app.json文件中全局配置小程序API"tabBar": {"color": "#fff","selectedColor": "red","backgroundColor": "skyblue","list": [{"

qq_36437172

4476人浏览 · 2018-09-09 15:59:56

qq_36437172 · 2018-09-09 15:59:56 发布

1.微信app.json文件中全局配置小程序API

"tabBar": {
"color": "#fff",
"selectedColor": "red",
"backgroundColor": "skyblue",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "分类"
}
]
}

2.自定义底部导航栏

<view class='tabitem'>
  <view style='height:1px;margin-bottom: 5px;background: #ccc;'></view>
  <view style="font-size:0px;width: {{ itemWidth }}px" wx:for="{{tabarr}}" class="view-flex-column {{tab==index?'tabbarActive':''}}" wx:key="unique" data-idx='{{index}}' bindtap='tabbartap'>
    <!-- 未选中状态 -->
    <image wx:if="{{ index!=2 && index != tab }}" style="border-bottom:2px solid #000;" class="tabimg" src="{{ item.img }}" style="width:44rpx;height:44rpx;"></image>
    <!-- 选中状态 -->
    <image class="activeimg" wx:if="{{ tab==index && index !=2 }}" src="{{ item.activeimg }}" style="width:44rpx;height:44rpx;"></image>
    <!-- 扫一扫图标 -->
    <image bindtap="click" class="activeimg" wx:if="{{ index==2 }}" src="{{ item.img }}" style="width:80rpx;height:80rpx; position: relative;"></image>
    <text style="font-size:28rpx; margin: 0; padding: 8rpx 0 0 0;">{{ item.text }}</text>
  </view>
</view>
<view wx:if="{{ tab == 0 }}" style="height:{{ contentHeight }}px;overflow-y: scroll">
  <wardrobe address="{{ addr }}" longitudeAndlat="{{ latAndlng }}"></wardrobe>
</view>
<view wx:if="{{ tab == 1 }}" style="height:{{ contentHeight }}px;">
  <brand address="{{ addr }}" longitudeAndlat="{{ latAndlng }}"></brand>
</view>
<view wx:if="{{ tab == 3 }}" style="height:{{ contentHeight }}px;overflow-y: scroll">
  <car></car>
</view>
<view wx:if="{{ tab == 4 }}" style="height:{{ contentHeight }}px;overflow-y: scroll">
  <me></me>
</view>

data: {
    tabarr: [
      { img: '../images/bottom/icon-1.png', activeimg: '../images/bottom/icon-1-clicked.png', text: '首页' },
      { img: '../images/bottom/icon-2.png', activeimg: '../images/bottom/icon-2-clicked.png', text: '分类' },
      { img: '../images/bottom/icon-3.png', text: '' },
      { img: '../images/bottom/icon-4.png', activeimg: '../images/bottom/icon-4-clicked.png', text: '购物车' },
      { img: '../images/bottom/icon-5.png', activeimg: '../images/bottom/icon-5-clicked.png', text: '我的' }
    ],
    tab: 0,
    // 设置
    title: ['首页', '分类', '', '购物车', '我的'],
  },

  //点击切换事件
  tabbartap(e) {
    var that = this;
    if (e.currentTarget.dataset.idx != 2){
      that.setData({
        tab: e.currentTarget.dataset.idx
      });
      // 为组件添加顶部标题
      wx.setNavigationBarTitle({
        title: this.data.title[e.currentTarget.dataset.idx],
      })
    }
  },

  //动态计算
  onLoad: function (options) {
    console.log(wx.getSystemInfoSync().windowWidth / this.data.tabarr.length)
    this.setData({
      itemWidth: wx.getSystemInfoSync().windowWidth / this.data.tabarr.length,
      contentHeight: wx.getSystemInfoSync().windowHeight -54
    })
  },