weex-uikit
weex-uikit copied to clipboard
tabbar会挡住一部分内容,在chorme浏览器查看时是固定在底部,但用playground扫秒查看不会固定在底部
在App.vue里加了tabbar,代码如下。tabbar会挡住一部分内容,在chorme浏览器查看时是固定在底部,但用playground扫秒查看却不会固定在底部
<template>
<div class="v-app" style="flex-direction:column;" :style="{height:appHeight}">
<u-header v-if="$route.path!=='/'">
<v-icon slot="left" color="#fff" @click="$router.go(-1)"></v-icon>{{$store.getters.title}}<v-icon slot="right" color="#fff" @click="copy"></v-icon>
</u-header>
<!-- <scroller style="flex:1;"> -->
<router-view></router-view>
<!-- </scroller> -->
<u-mask :show="$store.getters.maskVisiable" @click="onMaskClick">
<u-select-popup :mask-show="$store.getters.maskVisiable" @hide-mask="$store.dispatch('toggleMask', false)"></u-select-popup>
<u-loading v-if="$store.getters.loadingVisiable">2秒后消失</u-loading>
</u-mask>
<div class="v-tabbar">
<!--<router-view></router-view>-->
<u-tabbar :value="$route.path" router>
<u-tabbar-item label="首页" index="/"></u-tabbar-item>
<u-tabbar-item label="购物车" index="/tabbar/cart"></u-tabbar-item>
<u-tabbar-item label="订单" index="/tabbar/order"></u-tabbar-item>
<u-tabbar-item label="我的" index="/tabbar/my"></u-tabbar-item>
</u-tabbar>
</div>
</div>
</template>
<script>
const clipboard = weex.requireModule('clipboard')
const modal = weex.requireModule('modal')
export default {
data () {
return {
appHeight: weex.config.deviceHeight + 'px'
}
},
methods: {
copy () {
clipboard.setString(weex.config.bundleUrl)
modal.toast({ message: '已复制地址', duration: 0.3 })
},
onMaskClick () {
if (!this.$store.getters.loadingVisiable) {
this.$store.dispatch('toggleMask', false)
}
}
}
}
</script>
<style scoped>
.v-app {
background-color: #f9fafc;
}
.v-tabbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>