160 lines
3.8 KiB
Plaintext
160 lines
3.8 KiB
Plaintext
<template>
|
||
<view class="fui-wrap">
|
||
<swiper class="fui-swiper__wrap" :current="current" :duration="300" @change="change">
|
||
<swiper-item class="fui-swiper__item" v-for="(tab, index) in tabBar" :key="index">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="fui-scroll__wrap" enableBackToTop="true" scroll-y loadmoreoffset="15">
|
||
<cell>
|
||
<text class="fui-text">{{texts[index]}}</text>
|
||
</cell>
|
||
<cell>
|
||
<cell>
|
||
<view class="fui-tabbar__h" :style="{height:height+'px'}"> </view>
|
||
</cell>
|
||
</cell>
|
||
</list>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view scroll-y class="fui-scroll__wrap">
|
||
<view class="fui-text">{{texts[index]}}</view>
|
||
<view class="fui-tabbar__h" :style="{height:height+'px'}"> </view>
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<fui-tabbar :tabBar="tabBar" :current="current" @init="init" @click="itemClick"></fui-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
tabBar: [{
|
||
text: "组件",
|
||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||
},
|
||
{
|
||
text: "布局",
|
||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||
},
|
||
{
|
||
text: "模板",
|
||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||
},
|
||
{
|
||
text: "我的",
|
||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||
}
|
||
],
|
||
height: 0,
|
||
texts: [
|
||
'Tabbar 标签栏，用于在不同功能模块之间进行切换，小图标建议尺寸84*84。',
|
||
'该使用方式在非Nvue端只适用于简单的页面，过于复杂的页面建议仅App-Nvue端使用。',
|
||
'非必要情况下建议使用原生tabbar。',
|
||
'由于Nvue端Android下内容超出会强制隐藏，所以App-Nvue暂不支持中间凸起图标，可使用原生tabbar配置。'
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
init(e) {
|
||
//处理tabbar高度，避免内容被tabbar遮住
|
||
this.height = e.height
|
||
},
|
||
itemClick(e) {
|
||
console.log(e)
|
||
//这里可以做其他验证处理，比如登录等
|
||
//....
|
||
//验证通过执行以下逻辑
|
||
this.current = e.index
|
||
this.setTitle(e.index)
|
||
},
|
||
change(e) {
|
||
//禁止左右滑动
|
||
if (e.detail.source == 'touch') {
|
||
let index = e.target.current || e.detail.current;
|
||
this.current = index;
|
||
this.setTitle(index)
|
||
}
|
||
},
|
||
setTitle(index) {
|
||
uni.setNavigationBarTitle({
|
||
title: ['组件', '布局', '模板', '我的'][index]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* #endif */
|
||
.fui-wrap {
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
|
||
/* #ifdef H5 */
|
||
height: 100vh;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-swiper__wrap {
|
||
/* #ifdef APP-NVUE */
|
||
display: flex;
|
||
flex: 1;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
.fui-swiper__item {
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.fui-scroll__wrap {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
width: 750rpx;
|
||
flex: 1;
|
||
/* #endif */
|
||
/* #ifndef MP-ALIPAY */
|
||
flex-direction: column;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-tabbar__h {
|
||
width: 750rpx;
|
||
}
|
||
|
||
.fui-text {
|
||
font-size: 28rpx;
|
||
color: #B2B2B2;
|
||
padding: 32rpx;
|
||
/* #ifndef APP-NVUE */
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
}
|
||
</style>
|