Wechat applet wepy framework tutorial - bottom navigation bar effect

File

Weby is Tencent's own development framework. Its main function is to improve the developer's development efficiency. It adopts the code writing style similar to vue, and the developer can skillfully start small program development.

First on the renderings


1: create four new interfaces
In components
Create four new wepy files below
Namely
message list interface

<template>
  <view class="me">
   //Message list interface
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

Contact contact interface

<template>
  <view class="me">
    //Contact interface
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

discovery Discovery Interface

<template>
  <view class="me">
   //Discovery Interface
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

me my home page

<template>
  <view class="me">
   //My homepage
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

2: write index interface code

<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 - WeChat',
      '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>


3: new images folder, ready Icon



4: create a new tab.wpy under components
Writing code

<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">WeChat</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">Mail list</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">find</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">I</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>

5: all ready, compile


6: open the wechat developer tool and view the effect (the dynamic graph effect has been given at the beginning)


github:https://github.com/wangxiaoting666/wepy-myproject

Original author: qiche girl technology blog: https://www.jianshu.com/u/05f416aefbe1
Post-90s front-end sister, love programming, love operation, literature and code fly together, charm and wisdom coexist.
Insist on summing up the technical problems encountered in the work and recording what you think and see in the work. For the problems on the blog, you can join qq technical exchange group chat: 649040560.

Tags: github Vue Programming

Posted on Sat, 30 Nov 2019 21:58:01 -0800 by dhruvasagar