快应用模拟Tabbar
原因:由于快应用没有内置的tabbar配置,所以需要我们根据小程序或者App的tabbar样式来模拟一个。这里就会用到组件的思维方式。这样我们就会用到快应用的block组件来切换不同的显示页面,当然底部任然需要我们用到tabs容器来模拟底部tabbar的样式,通过控制tabs里面的tab-bar的点击事件来识别应该切换的block块。
实例代码如下:
//第一步:组件引入
<import name="my" src="../My/index.ux"></import>
<import name="cart" src="../Cart/singleCart/index.ux"></import>
<import name="classify" src="../classifies/index.ux"></import>
<import name="home" src="../Home/index.ux"></import>
<import name="quan" src="../circle/index/index.ux"></import>
//第二步:代码块实现
<template>
<div class="container">
<block if="{
{flag == 0}}">
<!-- 首页 -->
<home></home>
</block>
<block if="{
{flag == 1}}">
<!-- 分类 -->
<classify></classify>
</block>
<block if="{
{flag == 2}}">
<!-- 购物车 -->
<cart></cart>
</block>
<block if="{
{flag == 3}}">
<!-- 圈子 -->
<quan></quan>
</block>
<block if="{
{flag == 4}}">
<!-- 个人中心 -->
<my></my>
</block>
<!-- 底部导航栏 -->
<tabs class="kite-tabs">
<tab-bar class="footer-container">
<!--遍历tabBar.list,生成导航栏-->
<block for='tabBar.list'>
<div class="footer-item" onclick="setIndex($idx)">
<!--$idx为tabBar.list当前的索引值,以0开始-->
<!--如果当前页面被选中-->
<block if='{
{$idx==flag}}'>
<!--icon-->
<image src="{
{httpUrl+tabBar.list[$idx].selected_icon}}" class="footer-item-img"></image>
<!--页面标签值-->
<text class="tab-text" style="color: {
{tabBar.list[$idx].selected_color}}">{
{tabBar.list[$idx].name}}</text>
</block>
<!--当前页面未被选中-->
<block else>
<image src="{
{httpUrl+tabBar.list[$idx].icon}}" class="footer-item-img"></image>
<text class="tab-text" style="color: {
{tabBar.list[$idx].color}}">{
{tabBar.list[$idx].name}}</text>
</block>
</div>
</block>
</tab-bar>
</tabs>
</div>
</template>
//第三步:css样式引入或者直接把样式写在这里
<style>
@import "./tabbar.css";
text {
font-size: 40px;
text-align: center;
}
</style>
//第四步:js代码的实现
<script>
/* eslint-disable semi */
/* eslint-disable indent */
module.exports = {
private: {
flag: 0, //默认显示第一页
tabBar: { //tabbar的数据模拟
list: [{
name: '首页',
title: '',
icon: '/Common/images/1.png',
color: '#666666',
selected_color: '#FF4B4E',
selected_icon: '/Common/images/11.png'
}, {
name: '分类',
title: '分类',
icon: '/Common/images/2.png',
color: '#666666',
selected_color: '#FF4B4E',
selected_icon: '/Common/images/22.png'
},
{
name: '购物车',
title: '购物车',
icon: '/Common/images/5.png',
color: '#666666',
selected_color: '#FF4B4E',
selected_icon: '/Common/images/55.png'
},
{
name: '圈子',
title: '圈子',
icon: '/Common/images/3.png',
color: '#666666',
selected_color: '#FF4B4E',
selected_icon: '/Common/images/33.png'
},
{
name: '我的',
title: '我的',
icon: '/Common/images/4.png',
color: '#666666',
selected_color: '#FF4B4E',
selected_icon: '/Common/images/44.png'
}]
}
},
onInit() { //初始化数据
var that = this;
that.$page.setTitleBar({ text: that.tabBar.list[that.flag].name })
that.flag = that.$app.$def.global['flag']
},
setIndex: function (pos) { //点击切换页面并当前点击的tabbar图片高亮
var that = this;
that.flag = pos;
var title = that.tabBar.list[pos].title ? that.tabBar.list[pos].title : that.$app.$def.global['titleName'];
that.$page.setTitleBar({ text: title });
}
}
</script>