uni-app开发(1)---首页顶部导航与内容联动

APP项目首页往往会出现顶部导航与下面内容部分联动的需求，具体需求与效果图如下：

业务需求：

（1）点击顶部导航后，下面内容部分自动滚动。

（2）滑动内容部分后，顶部导航自动选中分类。

---

效果图：

---

逻辑分析：

顶部导航使用，scroll-view标签，选中的分类添加active类名，声明选中的分类索引为tabIndex。下面内容部分，使用swiper标签，当前展示的内容的current属性编辑索引，:current = 'tabIndex'既可以实现，顶部导航与下面内容的联动处理。相关函数如下：

// 点击顶部分类
tapTab(index) {
	this.tabIndex = index;
},
// 滑动轮播图
tabChange(e){
	console.log(JSON.stringify(e.detail));
	this.tabIndex = e.detail.current;
}
	

---

注意事项：

内容部分，需要采用swiper组件，但是标签的高度需要时全屏的，如何计算高度呢？内容高度 = 可视区域 - 顶部导航栏高度。

可视区域高度的获取，需要调用API，代码如下：

onLoad() {
	let _this = this;
	uni.getSystemInfo({
		success: function(res) {
			let height = res.windowHeight - uni.upx2px(100);
			_this.swiperHeight = height;
			console.log(_this.swiperHeight)
		}
	});
},

特别注意：这个方法中this的指向问题。

---

源码展示：