app/pages/tabbar/vlog/index.nvue

<template>
	<view
		class="page"
		:id="pageId"
	>
		<swiper
			:disable-touch="!canSwipe"
			ref="swiper1"
			id="tab-bar-view"
			style="my-swiper"
			:style="{ height: screenHeight + 'px' }"
			:current="curIndex"
			@change="changeTopTab"
			@transition="onswiperscroll"
			@animationfinish="animationfinish"
			@onAnimationEnd="animationfinish"
		>
			<swiper-item>
				<video-local ref="videoLocal"></video-local>
			</swiper-item>
			<swiper-item>
				<!-- 			<view
					v-if="myUserInfo == null"
					ref="videoFollowComp"
					class="my-follow"
					:style="{ height: screenHeight + 'px' }"
				>
					<text class="warn-info">请登录后查看！</text>
				</view> -->
				<video-follow-comp ref="videoFollowComp"></video-follow-comp>
			</swiper-item>
			<swiper-item>
				<video-comp ref="videoComp"></video-comp>
			</swiper-item>
		</swiper>

		<view
			class="header"
			id="head"
			:style="{ marginTop: statusBarHeight + 'px' }"
			v-if="!isLoading"
		>
			<text class="header-left"></text>
			<view class="header-center">
				<scroll-view
					ref="tabbar1"
					id="tab-bar"
					class="tab-bar"
					:scroll="false"
					:scroll-x="true"
					:show-scrollbar="false"
					:scroll-into-view="scrollInto"
				>
					<view style="flex-direction: column; flex: 1">
						<view style="flex-direction: row; flex: 1; justify-content: space-around">
							<view
								class="uni-tab-item"
								v-for="(tab, index) in tabList"
								:key="tab.id"
								:id="tab.id"
								:ref="'tabitem' + index"
								:data-id="index"
								:data-current="index"
								@click="ontabtap"
							>
								<text
									class="uni-tab-item-title scroll-view-animation"
									:class="tabIndex == index ? 'uni-tab-item-title-active' : ''"
								>
									{{ tab.name }}
								</text>
							</view>
						</view>
						<view class="scroll-view-indicator">
							<view
								ref="underline"
								class="scroll-view-underline"
								:class="isTap ? 'scroll-view-animation' : ''"
								:style="{ left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px' }"
							></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<image
				class="header-right-search normal-img"
				src="/static/images/icon-search.png"
				@click="goSearch"
			/>
		</view>

		<view
			class="header"
			:style="{ marginTop: statusBarHeight + 'px' }"
			v-if="isLoading"
		>
			<text class="header-left"></text>
			<view class="header-center">
				<view class="header-item">
					<text class="header-refresh-title">下拉刷新视频</text>
				</view>
			</view>
			<image
				class="header-right-search normal-img"
				src="/static/images/loading.gif"
			/>
		</view>
	</view>
</template>
<script>
let animation = weex.requireModule('animation');
let dom = weex.requireModule('dom');
let system = uni.getSystemInfoSync();

console.log(system);
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;
const TAB_PRELOAD_OFFSET = 1;
import storage from '@/utils/storage.js'; //缓存
import { vlogList } from '@/api/vlog';
import { isStrEmpty } from '@/utils/tools.js';
// import videoComp from '@/components/vlog/videoComp';
import videoComp from '@/components/vlog/tuijian.nvue';
import videoLocal from '@/components/vlog/local.nvue';
import videoFollowComp from '@/components/vlog/guanzhu.nvue';
import config from '@/config/config';

export default {
	components: {
		videoLocal,
		videoComp,
		videoFollowComp
	},
	data() {
		return {
			channel: null,
			canSwipe: true,
			isTap: false,
			isLoading: false,
			statusBarHeight: system.statusBarHeight,
			screenHeight: system.screenHeight,
			curIndex: 2,
			cityCode: '',
			playStatus: false, // 推荐
			playFollowStatus: false, // 关注
			playLocalStatus: false, // 同城
			videoList: [], // 首页一开始查询所得的默认视频列表
			refreshList: [], // 下拉刷新后获得的新的列表
			pagingList: [], // 分页list
			refresh: 0, // 从me页面传来的refresh，用于退出登录后重新刷新当前页的视频
			/////////////////
			pageList: ['videoLocal', 'videoFollowComp', 'videoComp'],
			tabList: [
				{
					id: 'tab' + 0,
					name: '同城',
					pageid: 1
				},
				{
					id: 'tab' + 1,
					name: '关注',
					pageid: 2
				},
				{
					id: 'tab' + 2,
					name: '推荐',
					pageid: 3
				}
			], //tabs内容,'fujin','videoFollowComp','videoComp'
			indicatorLineLeft: 0,
			indicatorLineWidth: 0,
			cacheTab: [],
			scrollInto: '',
			pageId: 'page',
			tabIndex: 2,
			isDraw_lo: false,
			isDraw_tj: false,
			isDraw_gz: false
		};
	},
	created() {
		// 处理进度条事件
		this.channel = new BroadcastChannel('video-progress');
		this.channel.onmessage = (event) => {
			console.log(event);
			const { type, data } = event.data;
			if (type === 'drag-start') {
				this.canSwipe = false;
			} else if (type === 'drag-end') {
				this.canSwipe = true;
			}
		};
	},
	onReady() {
		this.handleHuaWei();
		this._lastTabIndex = 0;
		this.swiperWidth = 0;
		this.tabbarWidth = 0;
		this.tabListSize = {};
		this._touchTabIndex = 0;
		this._headHeight = 100;
		var timer = setTimeout(() => {
			this.selectorQuery();
			clearTimeout(timer);
		}, 300);
	},
	onTabItemTap(e) {
		// 点击tab菜单
		console.log(e);
		let tabIndex = e.index;
		if (tabIndex == 0) {
			var prop = this.pageList[this.curIndex];
			// this.$refs[prop].showVd();
			console.log('是否刷新：' + storage.getRefreshVlogIndex());
			if (storage.getRefreshVlogIndex() === '1') {
				try {
					storage.setRefreshVlogIndex('0'); //初始完数据修改状态不需要刷新
					console.log('是否刷新：' + storage.getRefreshVlogIndex());
					// 登录后需要刷新数据
					for (var i = 0; i < this.pageList.length; i++) {
						this.$refs[i].dataList = []; //所有数据清空
					}
					this.$refs[prop].get(); //只初始化当前所在位置的数据
				} catch (err) {
					console.log(err + '255');
				}
			} else {
				try {
					this.$refs[prop].showVd();
				} catch (err) {
					console.log(err);
				}
			}
		}
	},
	onShow() {
		console.log('首页');
		var prop = this.pageList[this.curIndex];
		if (storage.getRefreshVlogIndex() == '1') {
			// 登录后需要刷新数据
			for (var i = 0; i < this.pageList.length; i++) {
				this.$refs[i].dataList = []; //所有数据清空
			}
			this.$refs[prop].get(); //只初始化当前所在位置的数据
			storage.setRefreshVlogIndex('0'); //初始完数据修改状态不需要刷新
		} else {
			try {
				console.log('index刷新子组件');
				var lst = this.$refs[prop].dataList;
				if (lst.length) {
					this.$refs[prop].showVd();
				} else {
					this.$refs[prop].get();
				}
			} catch (e) {
				console.log('首页刷新异常');
			}
		}
	},
	onHide() {
		var prop = this.pageList[this.curIndex];
		try {
			this.$refs[prop].hideVd();
		} catch {}
	},

	// 当前页下拉刷新
	// onPullDownRefresh() {
	// 	var me = this;
	// 	// 下拉刷新判断，如果是不同tab，那么组件中刷新的请求也不同
	// 	if (me.curIndex == 0) {
	// 		this.$refs.videoFollowComp.displayVideoPaging(1, true);
	// 	} else if (me.curIndex == 1) {
	// 		this.$refs.videoComp.displayVideoPaging(1, true);
	// 	}

	// },
	methods: {
		handleHuaWei() {
			// 处理华为机型问题
			// #ifdef APP-HARMONY
			uni.setTabBarStyle({
				color: '#e8e8e8'
			});
			// #endif
		},
		getLocation(localdom) {
			uni.getLocation({
				type: 'wg84',
				success: (res) => {
					console.log(res);
					var latitude = res.latitude;
					var longitude = res.longitude;
					var location = latitude + ',' + longitude;
					var key = config.aMapKey;
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/',
						method: 'GET',
						data: {
							location,
							key
						},
						success: (address) => {
							console.log(address);
							var ad_info = address.data.result.ad_info;
							var cityCode = ad_info.adcode; // 城市编码cityCode
							storage.setCityCode(cityCode);
							this.cityCode = cityCode;
							var address_name = ad_info.district || ad_info.city;
							this.tabList.forEach((i, index) => {
								if (index == 0) {
									localdom.get();
									i.name = address_name;
									// this.selectorQuery();
									var timer = setTimeout(() => {
										this.selectorQuery();
										clearTimeout(timer);
									}, 300);
								}
							});
						},
						fail: (err) => {
							console.log(err);
							storage.setCityCode('');
							uni.showToast({
								icon: 'none',
								title: '位置信息解析失败'
							});
						}
					});
				},
				fail: (err) => {
					console.log(err);
					storage.setCityCode('');
					uni.showToast({
						icon: 'none',
						title: '获取位置信息失败,请前往设置'
					});
				}
			});
		},

		// 前往搜索页面
		goSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		// ----------头部区域点击tabs
		ontabtap(e) {
			console.log(e);
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.isTap = true;
			var currentSize = this.tabListSize[index];

			this.updateIndicator(currentSize.left, currentSize.width);
			this._touchTabIndex = index;
			this.switchTab(index);
		},
		//
		selectorQuery() {
			var dm = uni.createSelectorQuery().in(this);
			dm.select('#head')
				.boundingClientRect()
				.exec((rect) => {
					this._headHeight = rect[0].height;
				});

			// 查询 tabbar 宽度
			dm.in(this)
				.select('#tab-bar')
				.boundingClientRect()
				.exec((rect) => {
					this.tabbarWidth = rect[0].width;
					console.log(this.tabbarWidth);
				});
			// 查询 tabview 宽度
			dm.in(this)
				.select('#tab-bar-view')
				.boundingClientRect()
				.exec((rect) => {
					this.swiperWidth = rect[0].width;
					console.log(this.swiperWidth);
				});

			// 因 nvue 暂不支持 class 查询
			// var queryTabSize = uni.createSelectorQuery().in(this);
			var queryTabSize = dm;
			for (var i = 0; i < this.tabList.length; i++) {
				queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
			}
			queryTabSize.exec((rects) => {
				rects.forEach((rect) => {
					rect.left = rect.left - 40; //修正 left 值，减去 padding-left: 40px
					this.tabListSize[rect.dataset.id] = rect;
				});
				console.log(this.tabListSize[this.tabIndex]);
				this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
				this.switchTab(this.tabIndex);
			});
		},

		onswiperscroll(e) {
			var offsetX = e.detail.dx;
			var preloadIndex = this._lastTabIndex;
			if (offsetX > TAB_PRELOAD_OFFSET) {
				preloadIndex++;
			} else if (offsetX < -TAB_PRELOAD_OFFSET) {
				preloadIndex--;
			}
			let prop = this.pageList[preloadIndex];
			let obj = this.$refs[prop];
			if (!obj) return;
			// 点击切换
			if (this.isTap) {
				return;
			}
			// 切换失败
			if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
				return;
			}
			var percentage = Math.abs(this.swiperWidth / offsetX);
			var currentSize = this.tabListSize[this._lastTabIndex];
			var preloadSize = this.tabListSize[preloadIndex];
			var lineL = currentSize.left + (preloadSize.left - currentSize.left) / percentage;
			var lineW = currentSize.width + (preloadSize.width - currentSize.width) / percentage;
			this.updateIndicator(lineL, lineW);
		},
		animationfinish(e) {
			let index = e.detail.current;
			console.log('当前索引' + index);
			console.log('之前的索引' + this._lastTabIndex);
			if (index != this._lastTabIndex) {
				// 成功切换
				var beforeProp = this.pageList[this._lastTabIndex];
				var indexProp = this.pageList[index];
				if (this.$refs[indexProp].dataList.length == 0) {
					if (index == 0) {
						var localdom = this.$refs[indexProp];
						this.getLocation(localdom);
					} else {
						// 初始化数据
						try {
							this.$refs[indexProp].get();
						} catch {}
					}
				}
				try {
					this.$refs[beforeProp].hideVd();
				} catch {}
				try {
					this.$refs[indexProp].showVd();
				} catch {}
			}
			this._lastTabIndex = index;
			if (this._touchTabIndex === index) {
				this.isTap = false;
			}
			this.switchTab(index);
			if (!this.tabListSize[index]) {
				return;
			} else {
				this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
			}
		},
		updateIndicator(left, width) {
			// console.log(left)
			this.indicatorLineLeft = left;
			this.indicatorLineWidth = width;
		},

		switchTab(index) {
			if (this.tabIndex === index) {
				return;
			}
			this.tabIndex = index;
			this.curIndex = index;
			this.scrollTabTo(index);
			this.scrollInto = this.tabList[index].id;
		},
		scrollTabTo(index) {
			console.log(index);
			const el = this.$refs['tabitem' + index][0];
			let offset = 0;
			// TODO fix ios offset
			if (index > 0) {
				offset = this.tabbarWidth / 2 - this.tabListSize[index].width / 2;
				if (this.tabListSize[index].right < this.tabbarWidth / 2) {
					offset = this.tabListSize[0].width;
				}
			}
			dom.scrollToElement(el, {
				offset: -offset
			});
		},

		//----------------------------

		// 左滑右滑选项卡改变选中状态
		changeTopTab: function (e) {
			var current = e.detail.current;
			this.curIndex = current;
			this.tabIndex = current;
		},

		// 下拉刷新，改变head的字样显示
		showLoading() {
			this.isLoading = true;
		},
		hideLoading() {
			this.isLoading = false;
		}
	}
};
</script>

<style scoped>
/* index start */
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #000000;
}

/* index end */

/* 顶部选项卡 start */
.header {
	position: absolute;
	left: 0;
	right: 0;
	flex-direction: row;
	height: 100rpx;
	line-height: 100rpx;
	align-items: center;
	padding-left: 40px;
	padding-right: 40px;
}

.header-center {
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.header-left,
.header-right {
	color: #999;
	height: 100rpx;
	line-height: 100rpx;
	align-items: flex-start;
	justify-content: flex-end;
	font-family: iconfont;
}

.header-right-search {
	height: 100rpx;
	/* align-items: flex-start;
		justify-content: flex-end; */
}

.header-item {
	align-items: center;
	margin-left: 6rpx;
	margin-right: 6rpx;
}

.header-item-title {
	width: 120rpx;
	text-align: center;
	height: 60rpx;
	line-height: 60rpx;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}

.header-refresh-title {
	width: 300rpx;
	text-align: center;
	height: 60rpx;
	line-height: 60rpx;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}

.header-item-line {
	height: 5rpx;
	line-height: 8rpx;
	width: 60rpx;
	border-radius: 8rpx;
}

/* 顶部选项卡 end */

/* 选项卡轮播组件 start */
.my-swiper {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.near-by {
	background-color: #000000;
	align-items: center;
	justify-content: center;
}

.my-follow {
	background-color: #000000;
	align-items: center;
	justify-content: center;
}

/* 选项卡轮播组件 end */
.warn-info {
	color: #ffffff;
	font-size: 36rpx;
	font-weight: 600;
}

.normal-img {
	width: 50rpx;
	height: 50rpx;
	opacity: 0.8;
}

/*  */
.tab-bar {
	/* width: 750upx; */
	flex: 1;
	height: 84upx;
	flex-direction: row;
	lines: 1;
	text-overflow: ellipsis;
	justify-content: center;
	align-items: center;
}

.uni-tab-item {
	flex-wrap: nowrap;
	/* padding-left: 25px; */
	/* padding-right: 25px; */
}

.uni-tab-item-title {
	/* color: #999; */
	color: #e8e8e8;
	font-size: 30upx;
	height: 80upx;
	line-height: 80upx;
	flex-wrap: nowrap;
	lines: 1;
	text-overflow: ellipsis;
}

.uni-tab-item-title-active {
	color: #ffffff;
}

.scroll-view-indicator {
	position: relative;
	height: 2px;
	background-color: transparent;
}

.scroll-view-underline {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	/* background-color: #007AFF; */
	background-color: #ffffff;
}

.scroll-view-animation {
	transition-duration: 0.2s;
	/* transition-property: transform; */
}

.tab-bar-line {
	height: 1upx;
	background-color: #cccccc;
}
</style>