底部导航栏效果

短命女 2021-09-19 10:36 481阅读 0赞

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

![在这里插入图片描述][20190514093156278.png]  
![在这里插入图片描述][20190514093210209.png]  
在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>

![在这里插入图片描述][20190514093437839.png]

wepy踩坑

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]

[20190514093156278.png]: /images/20210724/6c348785055a4e08a8c54e1af9b3cebb.png
[20190514093210209.png]: /images/20210724/64ba6ec423604f3e98f48f7e6e75b9c7.png
[20190514093437839.png]: /images/20210724/984edb1c685b448987a2b5c813076370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/917feea8e39849f2836fe0179b210d65.png

发表评论取消回复

表情：

评论列表（有 0 条评论，481人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app底部导航栏设置

一、新建需要的页面 ![在这里插入图片描述][20210127111326810.png] 二、在pages.json文件里面配置文件页面路由 ![在这里插入图片描

绝地灬酷狼/ 2022年11月19日 07:52/ 0 赞/ 401 阅读

相关导航栏切换效果

在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路：首先说下this的用法： this在事件中指向的是事件源对象

落日映苍穹つ/ 2022年05月17日 01:06/ 0 赞/ 313 阅读

相关 wepy底部导航栏效果

文档 [wepy快速指南][wepy] [小程序框架wepy开发文档][wepy 1] [wepy开源][wepy 2] [wepy官方文档][w

不念不忘少年蓝@/ 2022年03月01日 01:46/ 0 赞/ 324 阅读

相关 wepy底部导航栏效果

文档 [wepy快速指南][wepy] [小程序框架wepy开发文档][wepy 1] [wepy开源][wepy 2] [wepy官方文档][w

Bertha 。/ 2022年01月26日 00:13/ 0 赞/ 269 阅读

相关底部导航栏效果

<template> <view class="me"> 消息列表界面 </view> </template> <

短命女/ 2021年09月19日 10:36/ 0 赞/ 482 阅读

相关移动电商——Flutter底部导航栏切换效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

秒速五厘米/ 2021年07月25日 22:07/ 0 赞/ 427 阅读

相关 Flutter实例——底部导航栏制作

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

谁践踏了优雅/ 2021年07月25日 19:42/ 0 赞/ 547 阅读

相关 flutter 底部导航栏组件BottomNavigationBar

底部导航栏组件 (1)在Scaffold组件中与body同级设置 bottomNavigationBar: BottomNavigationBar

淡淡的烟草味﹌/ 2021年07月24日 23:58/ 0 赞/ 463 阅读

相关 rn 底部导航栏

(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-hand

秒速五厘米/ 2021年07月24日 23:57/ 0 赞/ 603 阅读

相关 vue 底部导航栏组件

bug: 因为通过router-link跳转,所以只能点击文字跳转,将router-link换成其他标签,然后设置跳转事件能改变这一bug 因

- 日理万妓/ 2021年07月24日 23:23/ 0 赞/ 492 阅读