底部导航栏效果

代码语言：javascript复制

<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界面代码

代码语言：javascript复制

<style type="scss">
  .tab_item {
    height: 100%;
  }
  page, .body{
    height: 100%;
    font-family: '5FAE8F6F96C59ED1', 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

代码语言：javascript复制

<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踩坑

components wepy

0 人点赞