底部导航栏效果

<template>
  <view class="me">
   消息列表界面
  </view>
</template>
<script>
  import wepy from \'wepy\';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

<template>
  <view class="me">
    联系人界面
  </view>
</template>
<script>
  import wepy from \'wepy\';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

<template>
  <view class="me">
   发现界面
  </view>
</template>
<script>
  import wepy from \'wepy\';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

<template>
  <view class="me">
   我的主页
  </view>
</template>
<script>
  import wepy from \'wepy\';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

index界面代码

<style type="scss">
  .tab_item {
    height: 100%;
  }
  page, .body{
    height: 100%;
    font-family: \'\5FAE\8F6F\96C5\9ED1\', arial;
    background-color: #f0eff5;
  }
</style>
<template>
  <view class="body">
    <view class="tab_item tab_message" hidden="{{currentTab != 0}}">
      <message />
    </view>
    <view class="tab_item tab_contact" hidden="{{currentTab != 1}}">
      <contact />
    </view>
    <view class="tab_item tab_discovery" hidden="{{currentTab != 2}}">
      <discovery />
    </view>
    <view class="tab_item tab_me" hidden="{{currentTab != 3}}">
      <me />
    </view>

    <tab :active.sync="currentTab" />
    <toast />
  </view>
</template>

<script>
  import wepy from \'wepy\';
  import Message from \'../components/message\';
  import Discovery from \'../components/discovery\';
  import Contact from \'../components/contact\';
  import Me from \'../components/me\';
  import Tab from \'../components/tab\';
  import Toast from \'wepy-com-toast\';

  export default class Index extends wepy.page {
    config = {
      \'navigationBarTitleText\': \'wepy - 微信\',
      \'navigationBarTextStyle\': \'white\',
      \'navigationBarBackgroundColor\': \'#3b3a40\'
    };

    components = {
      message: Message,
      discovery: Discovery,
      me: Me,
      contact: Contact,
      tab: Tab,
      toast: Toast
    };

    data = {
      currentTab: 0
    };

    methods = {
    };

    onShow() {
      this.currentTab = 0;
      this.$invoke(\'message\', \'loadMessage\');
    }

    showToast(name) {
      let promise = this.$invoke(\'toast\', \'show\', {
        title: `${name}`,
        img: \'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png\'
      });

      promise.then((d) => {
        console.log(\'toast done\');
      });
    }
  }
</script>

在components底下新建tab.wpy

<style type="scss">
  $fontcolor: #7b7b7b;
  $activecolor: #13b113;
  .tab {
    color: $fontcolor;
    position: fixed;
    bottom: 0;
    height: 100rpx;
    width: 100%;
    border-top: 1px solid #dad9d6;
    background-color: #f7f7f7;
    font-size: 24rpx;
    white-space: nowrap;
    .tab_item {
      &.active {
        color: $activecolor;
      }
      display: inline-block;
      width: 25%;
      text-align: center;
    }
    .icon {
      width: 60rpx;
      height: 60rpx;
      display: block;
      margin: auto;
    }
    .title {
      padding-top: 6rpx;
      display: block;
    }
  }
</style>
<template>
  <view class="tab">
    <view class="tab_item tab_message{{active == 0 ? \' active\' : \'\'}}" @tap="change(0)">
      <image class="icon" src="../images/message{{active == 0 ? \'_active\' : \'\'}}.png"></image>
      <text class="title">微信</text>
    </view>
    <view class="tab_item tab_contact{{active == 1 ? \' active\' : \'\'}}" @tap="change(1)">
      <image class="icon" src="../images/contact{{active == 1 ? \'_active\' : \'\'}}.png"></image>
      <text class="title">通讯录</text>
    </view>
    <view class="tab_item tab_discovery{{active == 2 ? \' active\' : \'\'}}" @tap="change(2)">
      <image class="icon" src="../images/discovery{{active == 2 ? \'_active\' : \'\'}}.png"></image>
      <text class="title">发现</text>
    </view>
    <view class="tab_item tab_me{{active == 3 ? \' active\' : \'\'}}" @tap="change(3)">
      <image class="icon" src="../images/me{{active == 3 ? \'_active\' : \'\'}}.png"></image>
      <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>

wepy踩坑