dnyAppTruck/pages/index/tabbar.vue

<template>
	<view>
		<workTable ref="workTableRef" v-if="pageCurrent=='workTable'"></workTable>
		<me v-if="pageCurrent=='me'"></me>
		
		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="navChange" data-cur="order">
					<view class='cuIcon-cu-image'>
						<image v-if="pageCurrent=='order'" src="../../static/tabbar/order_cur.png"></image>
						<image v-if="pageCurrent != 'order'" src="../../static/tabbar/order.png"></image>
					</view>
					<view :class="pageCurrent=='order'?'color_main':'text-gray'">配送列表</view>
				</view>
				<view class="action" @click="navChange" data-cur="workTable">
					<view class='cuIcon-cu-image'>
						<image v-if="pageCurrent=='workTable'" src="../../static/tabbar/workTable_cur.png"></image>
						<image v-if="pageCurrent != 'workTable'" src="../../static/tabbar/workTable.png"></image>
					</view>
					<view :class="pageCurrent=='workTable'?'color_main':'text-gray'">工作台</view>
				</view>
				
<!-- 				<view @click="navChange" class="action text-gray add-action" data-cur="workTable">
					<image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image>
					<view :class="pageCurrent=='workTable'?'color_main':'text-gray'">工作台</view>
				</view> -->
				
				<view class="action" @click="navChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">
							<!-- 红点 -->
						</view>
						<image v-if="pageCurrent=='me'" src="../../static/tabbar/me_cur.png"></image>
						<image v-if="pageCurrent != 'me'" src="../../static/tabbar/me.png"></image>
					</view>
					<view :class="pageCurrent=='me'?'color_main':'text-gray'">个人中心</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import order from "./order.vue"; //消息
	import workTable from "./workTable.vue"; //工作台
	import me from "./me.vue"; //个人中心
	export default {
		components: {
			order,
			workTable,
			me
		},
		data() {
			return {
				pageCurrent: 'workTable'
			}
		},
		mounted() {
			
		},
		methods: {
			
			navChange: function(e) {
				console.log(e.currentTarget.dataset.cur);
				this.pageCurrent = e.currentTarget.dataset.cur;
			}
		},
		onLoad: function (options) {
			//uni.startPullDownRefresh();
			setTimeout(function () {
					console.log('start pulldown');
			}, 1500);
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			// console.log('refresh');
			// if (this.pageCurrent == 'workTable') {				
			// 	this.$refs['workTableRef'].pullDownRefresh();
			// 	setTimeout(function () {
			// 		uni.stopPullDownRefresh();
			// 	}, 1000);
			// }
		}
		
	}
</script>

<style>
	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}
	
	.logo_btn{
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border: #09BB07;
		border-radius: 50%;
		top: -50rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}
	
	.cu-bar.tabbar .action.add-action {
	    padding-top: 56rpx !important;
	}
</style>