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

待我称王封你为后i 2021-08-02 16:49 273阅读 0赞

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

**业务需求：**

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

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

--------------------

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

--------------------

**逻辑分析：**

顶部导航使用，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组件，但是标签的高度需要时全屏的，如何计算高度呢？内容高度 = 可视区域 - 顶部导航栏高度。

<view class="uni-tab-bar">
    	<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
    		<swiper-item v-for="(items, index) in newsList" :key="index">
    			<scroll-view scroll-y class="list">
    				<block v-for="(item, index1) in items.list" :key="index1">
    					<index-list :item="item" :index="index1"></index-list>
    				</block>
    			</scroll-view>
    		</swiper-item>
    	</swiper>
    </view>

可视区域高度的获取，需要调用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的指向问题。

--------------------

**源码展示：**

<template>
    	<view>
    		
    		<view class="uni-tab-bar">
    			<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x>
    				<view v-for="(tab,index) in tabBars" :key="index" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
    				 @click="tapTab(index)">{
       {tab.name}}
    					<view class="swiper-tab-line"></view>
    				</view>
    			</scroll-view>
    		</view>
    
    		
    		<view class="uni-tab-bar">
    			<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
    				<swiper-item v-for="(items, index) in newsList" :key="index">
    					<scroll-view scroll-y class="list">
    						<block v-for="(item, index1) in items.list" :key="index1">
    							<index-list :item="item" :index="index1"></index-list>
    						</block>
    					</scroll-view>
    				</swiper-item>
    			</swiper>
    		</view>
    
    
    	</view>
    </template>
    
    <script>
    	import indexList from '../../components/index/index-list.vue'
    	export default {
    		components: {
    			indexList
    		},
    		data() {
    			return {
    				swiperHeight: 500,
    				tabIndex: 0,
    				tabBars: [{
    						name: '关注',
    						id: 'guanzhu'
    					}, {
    						name: '推荐',
    						id: 'tuijian'
    					}, {
    						name: '体育',
    						id: 'tiyu'
    					}, {
    						name: '热点',
    						id: 'tiyu'
    					},
    					{
    						name: '体育',
    						id: 'tiyu'
    					},
    					{
    						name: '体育',
    						id: 'tiyu'
    					},
    					{
    						name: '体育',
    						id: 'tiyu'
    					}, {
    						name: '热点',
    						id: 'redian'
    					}
    				],
    				newsList: [{
    						list: [{
    								userpic: '../../static/demo/userpic/12.jpg',
    								username: '风向',
    								isguanzhu: false,
    								title: '标题',
    								type: 'img',
    								titlepic: '../../static/demo/datapic/11.jpg',
    								infonum: {
    									index: 0, //0未操作1顶2踩
    									dingnum: 11,
    									cainum: 11,
    								},
    								commentnum: 10,
    								sharenum: 10,
    								palynum: 200,
    								long: "2:35"
    							},
    							{
    								userpic: '../../static/demo/userpic/12.jpg',
    								username: '风向',
    								isguanzhu: true,
    								title: '标题',
    								type: 'video',
    								titlepic: '../../static/demo/datapic/11.jpg',
    								infonum: {
    									index: 1, //0未操作1顶2踩
    									dingnum: 11,
    									cainum: 11,
    								},
    								commentnum: 10,
    								sharenum: 10,
    								palynum: 200,
    								long: "2:35"
    							}
    						]
    					},
    					{
    						list: [{
    								userpic: '../../static/demo/userpic/12.jpg',
    								username: '风向',
    								isguanzhu: false,
    								title: '标题',
    								type: 'img',
    								titlepic: '../../static/demo/datapic/11.jpg',
    								infonum: {
    									index: 0, //0未操作1顶2踩
    									dingnum: 11,
    									cainum: 11,
    								},
    								commentnum: 10,
    								sharenum: 10,
    								palynum: 200,
    								long: "2:35"
    							},
    							{
    								userpic: '../../static/demo/userpic/12.jpg',
    								username: '风向',
    								isguanzhu: true,
    								title: '标题',
    								type: 'video',
    								titlepic: '../../static/demo/datapic/11.jpg',
    								infonum: {
    									index: 1, //0未操作1顶2踩
    									dingnum: 11,
    									cainum: 11,
    								},
    								commentnum: 10,
    								sharenum: 10,
    								palynum: 200,
    								long: "2:35"
    							}
    						]
    					},
    					{
    						list: [{
    								userpic: '../../static/demo/userpic/12.jpg',
    								username: '风向',
    								isguanzhu: false,
    								title: '标题',
    								type: 'img',
    								titlepic: '../../static/demo/datapic/11.jpg',
    								infonum: {
    									index: 0, //0未操作1顶2踩
    									dingnum: 11,
    									cainum: 11,
    								},
    								commentnum: 10,
    								sharenum: 10,
    								palynum: 200,
    								long: "2:35"
    							},
    							{
    								userpic: '../../static/demo/userpic/12.jpg',
    								username: '风向',
    								isguanzhu: true,
    								title: '标题',
    								type: 'video',
    								titlepic: '../../static/demo/datapic/11.jpg',
    								infonum: {
    									index: 1, //0未操作1顶2踩
    									dingnum: 11,
    									cainum: 11,
    								},
    								commentnum: 10,
    								sharenum: 10,
    								palynum: 200,
    								long: "2:35"
    							}
    						]
    					}
    
    				]
    			}
    		},
    		onLoad() {
    			let _this = this;
    			uni.getSystemInfo({
    				success: function(res) {
    					let height = res.windowHeight - uni.upx2px(100);
    					_this.swiperHeight = height;
    					console.log(_this.swiperHeight)
    				}
    			});
    		},
    		methods: {
    			// 点击事件
    			tapTab(index) {
    				this.tabIndex = index;
    			},
    			// 滑动事件
    			tabChange(e) {
    				console.log(JSON.stringify(e.detail));
    				this.tabIndex = e.detail.current;
    			}
    		}
    	}
    </script>
    
    <style>
    	.uni-tab-bar .active {
    		color: #343434;
    	}
    
    	.uni-tab-bar .active .swiper-tab-line {
    		border-bottom: 6upx solid #fede33;
    		width: 70upx;
    		margin: auto;
    		border-top: 6upx solid #fede33;
    		border-radius: 20upx;
    
    	}
    
    	.swiper-tab-list {
    		color: #969696;
    		font-weight: bold;
    	}
    
    	.uni-swiper-tab {
    		border-bottom: 1px solid #eeeeee;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/8ca36083f0844717a59694dcacf045e5.png