报名工具小程序初始代码
This commit is contained in:
liupopo
245
components/TabLayout/TabLayout.vue
Normal file
245
components/TabLayout/TabLayout.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
|
||||
|
||||
<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
|
||||
<tabRefresh ref="tabRefresh" @isRefresh='isRefresh'></tabRefresh>
|
||||
|
||||
<view class='nav'>
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<view :style="{'height':statusBarHeightPx}"></view>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<view
|
||||
:style="{'height':navHeightPx,'width':navWidthPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box','justify-content': 'space-between'}">
|
||||
<view
|
||||
:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}">
|
||||
<image :style="{'height':navHeightPx,'width':iconPx}" mode="aspectFit" :src="backIcon"
|
||||
@click="clickBack"></image>
|
||||
<text
|
||||
:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'33rpx','color':'#FFFFFF'}">{{text}}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}">
|
||||
<view v-if="useTitleLeftBtn!=0"
|
||||
:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}"
|
||||
@click="clickLeftBtn">
|
||||
<image v-if="useTitleLeftBtn == 2" :style="{'height':navHeightPx,'width':navHeightPx}"
|
||||
mode="aspectFit" :src="titleLeftBtnSource"></image>
|
||||
<text v-if="useTitleLeftBtn == 1"
|
||||
:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'28rpx','color':'#FFFFFF','padding-left':'20rpx','padding-right':'20rpx'}">{{titleLeftBtnSource}}</text>
|
||||
</view>
|
||||
<view v-if="useTitleRightBtn!=0"
|
||||
:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}"
|
||||
@click="clickRightBtn">
|
||||
<image v-if="useTitleRightBtn==2" :style="{'height':navHeightPx,'width':navHeightPx}"
|
||||
mode="aspectFit" :src="titleRightBtnSource"></image>
|
||||
<text v-if="useTitleRightBtn==1"
|
||||
:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'28rpx','color':'#FFFFFF','padding-left':'20rpx','padding-right':'20rpx'}">{{titleRightBtnSource}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<tabTop ref="navTab" :tabTitle="tabTitleData" :tabNum="tabNumData" @onTabClick='clickTab'></tabTop>
|
||||
|
||||
</view>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const util = require('@/util/util.js');
|
||||
export default {
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
isShareIn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
useTitleLeftBtn: {
|
||||
type: String,
|
||||
// 0不使用 1使用文字 2使用图片
|
||||
default: "0"
|
||||
},
|
||||
useTitleRightBtn: {
|
||||
type: String,
|
||||
// 0不使用 1使用文字 2使用图片
|
||||
default: "0"
|
||||
},
|
||||
titleLeftBtnSource: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
titleRightBtnSource: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
tabTitleData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tabNumData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0, //sweiper所在页
|
||||
swiperPaddindTop: 0,
|
||||
windowHeight: 0, // 可使用窗口的高度
|
||||
statusBarH: 0, // 状态栏高度
|
||||
statusBarHeight: "",
|
||||
navHeight: "",
|
||||
navWidth: "",
|
||||
totalHeight: "",
|
||||
statusBarHeightPx: "",
|
||||
navHeightPx: "",
|
||||
navWidthPx: "",
|
||||
totalHeightPx: "",
|
||||
bg: "#2fa1f0",
|
||||
totalHeightUpx: "",
|
||||
backIcon: "",
|
||||
iconPx: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getViewPagerTop() {
|
||||
return this.swiperPaddindTop
|
||||
},
|
||||
clickLeftBtn() {
|
||||
this.$emit("leftBtn", "左侧按钮")
|
||||
},
|
||||
clickRightBtn() {
|
||||
this.$emit("rightBtn", "右侧按钮")
|
||||
},
|
||||
clickBack() {
|
||||
if (this.hasBack) {
|
||||
if (this.$props.isShareIn) {
|
||||
uni.switchTab({
|
||||
url: "../../pages/home/FindFragment"
|
||||
})
|
||||
} else {
|
||||
this.Back()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 刷新touch监听
|
||||
refreshStart(e) {
|
||||
this.$refs.tabRefresh.refreshStart(e);
|
||||
},
|
||||
refreshMove(e) {
|
||||
this.$refs.tabRefresh.refreshMove(e);
|
||||
},
|
||||
refreshEnd(e) {
|
||||
this.$refs.tabRefresh.refreshEnd(e);
|
||||
},
|
||||
isRefresh() {
|
||||
this.$emit("downRefresh", this.currentTab)
|
||||
},
|
||||
// 下拉刷新完成主动调用
|
||||
downRefresh() {
|
||||
this.$refs.tabRefresh.endAfter()
|
||||
},
|
||||
// 主动点击tab
|
||||
clickTab(index) {
|
||||
// 对外提供点击的index(使用控件的页面更改data里currentTab值)
|
||||
// 保证能跟着滚动
|
||||
this.currentTab = index
|
||||
this.$emit("tabClickItem", index)
|
||||
}, // swiper 滑动
|
||||
changeTab(e) {
|
||||
var index = e.detail.current //获取索引
|
||||
// 模拟tab点击
|
||||
this.$refs.navTab.longClick(index);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
isShareIn(newValue) {
|
||||
|
||||
if (this.$props.hasBack) {
|
||||
this.backIcon = '../../static/custom-icon/back.png'
|
||||
this.iconPx = this.navHeightPx
|
||||
|
||||
if (this.$props.isShareIn) {
|
||||
this.backIcon = '../../static/custom-icon/home.png'
|
||||
}
|
||||
|
||||
} else {
|
||||
this.backIcon = '../../static/img/public/no-back.png'
|
||||
this.iconPx = this.navHeight / 8 * 3 + 'px'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.navWidth = getApp().globalData.navWidth
|
||||
this.navHeight = getApp().globalData.navHeight
|
||||
this.totalHeight = getApp().globalData.totalHeight
|
||||
this.statusBarHeight = getApp().globalData.statusBarHeight
|
||||
this.navWidthPx = getApp().globalData.navWidthPx
|
||||
this.navHeightPx = getApp().globalData.navHeightPx
|
||||
this.totalHeightPx = getApp().globalData.totalHeightPx
|
||||
this.statusBarHeightPx = getApp().globalData.statusBarHeightPx
|
||||
this.totalHeightUpx = getApp().globalData.totalHeightUpx
|
||||
|
||||
if (this.$props.hasBack) {
|
||||
this.backIcon = '../../static/img/public/back.png'
|
||||
this.iconPx = this.navHeightPx
|
||||
|
||||
if (this.$props.isShareIn) {
|
||||
this.backIcon = '../../static/img/public/home.png'
|
||||
}
|
||||
|
||||
} else {
|
||||
this.backIcon = '../../static/custom-icon/no-back.png'
|
||||
this.iconPx = this.navHeight / 8 * 3 + 'px'
|
||||
}
|
||||
|
||||
|
||||
this.swiperPaddindTop = this.totalHeight + 45 + 'px'
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container999 {
|
||||
width: 100vw;
|
||||
font-size: 28upx;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
color: #6B8082;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 24upx;
|
||||
background-color: #2fa1f0;
|
||||
z-index: 996;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user