uniapp关于导航栏的滚动切换，以及数据的分页处理

<template>
	<view class="content">
		<view class="classification-div">
			<scroll-view scroll-y="true"  refresher-enabled="true" :refresher-triggered="refreshering" @refresherrefresh="refresher">
				<view class="content">
					<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
					<Nav :navData="level1" @changeTab='changeTab' :changeNavIndex="current"></Nav>
					
			
				</view>
			</scroll-view>
			
		</view> 
		<!-- {{investmentProject}} -->
		<view class="data-div">
			
			<view class="data-bd-div">
				<view class="data-list-div" v-for="(item, index) in investmentProject" :key="index">
					<navigator class="navigator-div" :url="'../crowd_funding_project/crowd_funding_project?id=' + item.id" hover-class="none">
						<view class=""><image class="data-list-photo" :src="item.imgUrl"></image></view>
						<view class="data-list-cont-div">
							<view class="data-list-title-div">
								<text class="bl">{{ item.title }}</text>
							</view>
							<view class="data-list-txt">
								<view class="data-list-cell-txt">
									<!-- <text class="bl num-div"></text> -->
									<text class="bl txt-div">单份金额：{{ item.startAmount }}</text>
								</view>
								<view class="data-list-cell-txt">
									<!-- <text class="bl num-div">{{item.startAmount}}</text> -->
									<text class="bl txt-div">释放周期：{{ item.incomeIdayDes }}</text>
								</view>
								<view class="data-list-cell-txt">
									<!-- <text class="bl num-div">{{item.incomeIdayDes}}</text>						 -->
									<text class="bl txt-div">利率：{{ item.dayIncome }}%</text>
								</view>
							</view>
							<view class="progress">
								<view class="progress-div">
									<text class="bl progress-bot"></text>
									<text class="bl progress-top" :style="{ width: item.progressRate + '%' }"></text>
								</view>
								<text class="bl txt">当前项目进度{{ item.progressRate }}%</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import $page from '../../common/js/pages/investment.js';
import { baseImgUrl, wapShareUrl, appName } from '../../common/utils/config.js';
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot';
import Nav from '@/components/zq-Nav/zq-Nav'
	export default{
		components: {
			uniSwiperDot,
			Nav: Nav,
		},
		data() {
			return {
				baseImgUrl: baseImgUrl,
				appName: appName,
				newsNotice:[],
				investmentProject: [],
				topModel: {},
				isNewsPopup: false,
				regionalIdx:0,
				togglePopup:true,
				dataList:[],
				articleInfo: {},
				videoInfo: {},
				type: '',
				totalPage:0,
				title:'',
				List: {
					page_size: 10,
					page_index: 1,
					status: 0,
					level_id:20,
					is_recommend:1,
				},
				// 导航栏数据
				level1: [
					
				],
				
				// swiper动态高度
				swiperHeight: 0,
				current: 0,
				refreshering: true
			};
		},
		onLoad(e) {
			this.$api.isLogin(this);
			this.title = e.title || '投资专区';
			uni.setNavigationBarTitle({title: this.title});
		},
		onShow() {
			this.$api.isLogin(this);
			$page.loaddata(this);
		},
		onReachBottom() {
			if (this.List.page_index <= this.totalPage && this.List.page_index > 1) {
				$page.getInvestmentProjectPageList(this)
			}
		},
		methods:{
			// 滚动
			// 选择导航栏事件
				changeTab(index,id){
					// if(id!==this.List.level_id){
					// }
					this.investmentProject=[]
					this.List.level_id=id;
					console.log('this.List.level_id',this.List.level_id)
					this.current = index;
					this.List.page_index=1;
					
					$page.getInvestmentProjectPageList(this)
				},
				// 滑动内容页事件
				changeSwiper(e) {
					console.log('123',e)
					// this.id=id;
					// this.current = e.detail.current
					this.current = e.detail.current
					this.$emit('changeNavIndex', e.detail.current)
				},
				// 下拉刷新事件
				refresher() {
					var that = this
					that.refreshering = true
					console.log('下拉刷新')
					setTimeout(function() {
						that.refreshering = false
						console.log('刷新成功')
					},2000)
				}
		}
	}
</script>

<style lang="less">
	@import url("investment.less");

</style>

子组件区域

<view class="custom-nav-box">
		<scroll-view class="custom-nav" scroll-x="true" show-scrollbar="false" scroll-with-animation :scroll-left="lineBoxLeft">
			<view class="nav" v-for="(item, index) in navData" :key="index" @click="changeNav(index,item.id)" :class="index === navIndex? 'change-nav':'nav'">
				<!-- 数据格式在此修改 -->
				{{item.title}}
			</view> 
			<!-- <view class="custom-nav-line">
				<view class="line" :style='"transform:translateX("+lineLeft+"px);width:"+lineWidth+"px;background:"+lineColor+";height:"+lineHeight+"rpx;"'></view>
			</view> -->
		</scroll-view>
	</view>

<script>
	export default {
		data() {
			return {
				// 下划线背景色
				lineColor: '',
				// 下划线高度(rpx单位)
				lineHeight: 0,
				// 以下数值动态生成
				devideWidth: 0,
				lineBoxWidth: 0,
				lineBoxLeft: 0,
				lineLeft: 0,
				// lineWidth: 0,
				navIndex: 0
			};
		},
		props:{
			navData: {},
			changeNavIndex: Number
		},
		watch:{
			// changeNavIndex(navIndex) {
			// 	this.navIndex = navIndex
			// 	this.changeNav(navIndex)
			// }
		},
		methods:{
			setLineWidth() {
				this.devideWidth = document.body.clientWidth
				let navDom = document.getElementsByClassName('nav')
				let lineBoxWidth = 0
				for (let i = 0; i < this.navData.length; i++) {
					this.lineBoxWidth += navDom[i].offsetWidth*2
				}
				// this.lineWidth = navDom[0].offsetWidth
			},
			changeNav(index,id) {
				this.navIndex = index
				this.lineBoxLeft = 0
				let navDom = document.getElementsByClassName('nav')
				let navLeft = navDom[index].offsetLeft
				let navDomWidth = navDom[index].offsetWidth
				this.lineLeft = navLeft
				if (navLeft > this.devideWidth/2) {
					this.lineBoxLeft = navLeft - this.devideWidth/2
				}
				// 根据标题长度变化下划线长度
				// this.lineWidth = navDomWidth
				console.log('id1',id)
				this.$emit('changeTab', index,id)
			}
		},
		mounted() {
			this.$nextTick(function(){
				this.setLineWidth()
			})
		}
		
	}
</script>

<style lang="less">
	.custom-nav-box {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		.custom-nav {
			padding-bottom: 10rpx;
			display: flex;
			white-space: nowrap;
			.nav {  
				margin: 0 10rpx;// 未选中字体样式
				display: inline-block;
				padding: 15rpx 20rpx;
				font-size: 28rpx;
				border-radius: 20rpx;
				color: #fff;
				background: linear-gradient(to bottom,  #00c8a0 0%,#00c0aa 50%,#00b5b6 100%);
				// background-color: rgb(254, 90, 89);
			}
			.change-nav {               // 选中字体样式
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				background: #00c8a0;
			}
		}
		.custom-nav-line {
			position: relative;
			height: 4rpx; //下划线高度
			display: flex;
			.line {
				width: 100rpx;
				height: 100%;
				transition: .5s;
				
			}
		}
	}
</style>