底部导航栏

1.添加相应的图片资源

bar图片

2.创建一个tab.wpy

<style type="scss">
    .tab {
        color: #7b7b7b;
        position: fixed;
        bottom: 0;
        height: 98rpx;
        width: 100%;
        border-top: 1px solid #dad9d6;
        background-color: #f7f7f7;
        display: flex;
        flex-direction: row;
        .tab_item {
            &.active {
                color: #3761ad;
            }
            height: 100%;
            flex: 1;
        }
        .icon {
            padding-top: 10rpx;
            width: 44rpx;
            height: 44rpx;
            display: block;
            margin: auto;
        }
        .title {
            text-align: center;
            font-size: 24rpx;
            padding-top: 6rpx;
            display: block;
        }
    }
</style>

<template>
    <view class="tab">
        <view class="tab_item tab_home{{active == 0 ? ' active' : ''}}" @tap="change(0)">
            <image class="icon" src="../images/bar/home{{active == 0 ? '_selected' : '_normal'}}.png" />
            <text class="title">首页</text>
        </view>
        <view  class="tab_item tab_me{{active == 1 ? ' active' : ''}}" @tap="change(1)">
            <image class="icon" src="../images/bar/me{{active == 1 ? '_selected' : '_normal'}}.png"/>
            <text class="title">我</text>
        </view>
    </view>
</template>
<script>
  import wepy from 'wepy'
  export default class Tab extends wepy.component {
    props = {
      active: {
        twoWay: true
      }
    }
    data = {
    }
    methods = {
      change (idx, evt) {
        this.active = +idx
      }
    }
    onLoad () {
    }
  }
</script>

3.在index.wpy中添加

<tab :active.sync="currentTab" />

4.运行结果

底部导航栏添加完成