微信小程式wepy框架入門教程-底部導航欄效果（五）
摘要：
文件
wepy快速指南
小程式框架wepy開發文件
wepy開源
wepy官方文件
wepy是騰訊自己開發的框架，作用主要是提高開發者的開發效率，採用了類似使用了vue的程式碼書寫風格，開發者可以熟練的上手小程式開發。
先上效果圖
...
文件
wepy是騰訊自己開發的框架，作用主要是提高開發者的開發效率，採用了類似使用了vue的程式碼書寫風格，開發者可以熟練的上手小程式開發。
先上效果圖
1：新建四個介面
在components
底下新建四個wepy檔案
分別是
message 訊息列表介面
<template>
<view class="me">
訊息列表介面
</view>
</template>
<script>
import wepy from 'wepy';
export default class Me extends wepy.component {
components = {
}
methods = {
};
}
</script>
contact聯絡人介面
<template>
<view class="me">
聯絡人介面
</view>
</template>
<script>
import wepy from 'wepy';
export default class Me extends wepy.component {
components = {
}
methods = {
};
}
</script>
discovery發現介面
<template>
<view class="me">
發現介面
</view>
</template>
<script>
import wepy from 'wepy';
export default class Me extends wepy.component {
components = {
}
methods = {
};
}
</script>
me我的主頁
<template>
<view class="me">
我的主頁
</view>
</template>
<script>
import wepy from 'wepy';
export default class Me extends wepy.component {
components = {
}
methods = {
};
}
</script>
2:編寫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>
3：新建images資料夾，準備圖示
4:在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>
5：一切準備就緒，編譯
6：開啟微信開發者工具，檢視效果（開篇已經給出動態圖效果）
github: https://github.com/wangxiaoting666/wepy-myproject
原文作者：祈澈姑娘 技術部落格： https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，文藝與程式碼齊飛，魅力與智慧共存的程式媛一枚。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，對於部落格上面有不會的問題，可以加入qq技術交流群聊：649040560。