125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy_tabbar组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">底部导航栏</view>
|
||
<view class="content">
|
||
<view class="txt-wb">设置方法</view>
|
||
<view class="tip">
|
||
在page.json中定义tabbar的所有url。<br />
|
||
在App.vue中设置tabbarArr公共数组，包含所有未登录状态下的图标。数组中包括:<br />
|
||
name: 图标名称，支持多语言。<br />
|
||
fullpath: 页面url。<br />
|
||
selecticon: 选中下的图标，svg原始格式。<br />
|
||
icon: 未选中的图标，svg原始格式。<br />
|
||
通过更新tabbarArr数组改变tabbar。<br />
|
||
</view>
|
||
<view class="txt-wb">原理</view>
|
||
<view class="tip">
|
||
在公共onLoad函数中隐藏自带tabbar。<br />
|
||
任意设计底部导航栏样式。<br />
|
||
footer_safe_height是底部安全高度。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">Getheight</view>
|
||
<view class="tip">获取组件高度</view>
|
||
<button class="btn sm" @tap="callfun('tabbar', 'Getheight')">调用</button>
|
||
<view class="hr"></view>
|
||
<view class="fun">app.setTabbar</view>
|
||
<view class="tip">
|
||
object, 设置红点，改变图标、名称<br />
|
||
array, 完全覆盖tabbarArr
|
||
</view>
|
||
<button class="btn sm" @tap="chtabbar()">调用</button>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
<!-- <view class="evt">@change</view> -->
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-for="n in 10" :key="n" class="zw"> 占位 {{n}}</view>
|
||
</view>
|
||
<view class="sti" :style="{bottom:tabbarheight + 'px'}">
|
||
<ciy-ani ref="anibtn">
|
||
<view class="px4 py4">
|
||
<button type="primary" @tap="hidebtn">动画按钮</button>
|
||
</view>
|
||
</ciy-ani>
|
||
</view>
|
||
<ciy-tabbar ref="tabbar"></ciy-tabbar>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
tabbarheight: -100
|
||
}
|
||
},
|
||
onLoad() {
|
||
setTimeout(() => {
|
||
this.getrefs('tabbar').then(ref => {
|
||
this.tabbarheight = ref.Getheight();
|
||
console.log('asdfasdf',this.tabbarheight);
|
||
});
|
||
}, 500);
|
||
},
|
||
methods: {
|
||
chtabbar() {
|
||
var app = getApp();
|
||
app.setTabbar({
|
||
'tabbar.me': {
|
||
reddot: true
|
||
}
|
||
});
|
||
},
|
||
hidebtn() {
|
||
var anis = [{
|
||
scale: [0.4, 1.8]
|
||
}, {
|
||
step: {
|
||
duration: 500
|
||
}
|
||
}, {
|
||
scale: 1
|
||
}, {
|
||
opacity: 0
|
||
}, {
|
||
translateY: '5em'
|
||
}, {
|
||
step: {
|
||
duration: 1000
|
||
}
|
||
}, {
|
||
hide: true
|
||
}];
|
||
this.getrefs('anibtn').then(ref => ref.Doani({
|
||
anis: anis
|
||
}));
|
||
}
|
||
}
|
||
}
|
||
</script> |