前言

本人几率代码方便以后使用，导航栏下边框跟随特效

<template>
	<view class="video">
		<view class="topbar">
			<scroll-view scroll-x="true"
				class="scroll-view">
				<view class="rel">
					<!-- 导航条 -->
					<view class="item" v-for="(item,index) in navList" :key="index"
					:class="{active:curNav==item.id}" @tap="switchNav(item.id,index)">
						<view class="desc" ref="tarwidths">    
							{{item.name}}
						</view>
					</view>
					<!-- 下划线 -->
					<view class="slide" 
					:style="'width:'+sliderWidth+'rpx;transform:translatex('+sliderOffset+'rpx);'">
						
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 视频列表页 -->
		<!-- <mescroll-uni
		:down="downOption" 
		:up="upOption"
		@down="dowCallback"
		@up="upCallback"></mescroll-uni> -->
		<mescroll-body 
		@init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<!-- //  @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) 
			 // :down="downOption" :up="upOption" 绝大部分情况无需配置 
			 // :top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
			 // 此处支持写入原生组件 -->
			 <view class="video-item" v-for="(item,index) in relateVideo" :key="index">
			 	<view class="video-wrap">
			 		<!-- <image src="item.cover" mode=""></image> -->
			 	</view>
			 </view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
			// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
			// import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import apis from '@/apis/index.js'
    import MescrollUni from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		// components:{MescrollUni},
		mixins: [MescrollMixin], // 使用mixin，
		data() {
			return {
				relateVideo:[],//存放视频数据
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: { 
					auto:true,
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						num : 0 ,  //起始页
						size : 10 ,// 每页数据的数量,默认10
						time : null
					},
				},
				navList: [],      //tar导航条所有的
				curNav:'',        //当前选中的导航条
				sliderWidth:60,   //导航栏内每个元素的宽度 默认为60
				sliderOffset:32,  //导航栏行条的偏移量
				tarwidth:32,      //动态获取每个导航栏元素的宽度
			}
		},
		onLoad() {
			this.getVideoNavList();
			this.getVideoList();
		},
		methods: {
			//获取导航条
			getVideoNavList() {
				// const params={
				// 	offest:10
				// };
				apis.video.apiGetNavList().then(res => {
					// console.log(res);
					this.navList=res.data
					// this.navList=res.data.slice(0,7)
					// console.log(this.navList);
					// 默认选中第一项
					this.curNav=this.navList[0].id
				})
			},
			//导航条切换class样式
			switchNav(itemId,index){
				this.curNav=itemId;
				//动态获取每一个导航栏元素的宽度
				this.$nextTick(function () {
				  // that.tarwidth= that.$refs.tarwidths.offsetWidth
				 let infos=uni.createSelectorQuery().selectAll(".desc")
				 infos.boundingClientRect((data)=>{
					  // console.log(data);
					  for(let i=0;i<data.length;i++){
						  // console.log(data[i].width);
						  var w=data[index].width+36
						}
						console.log(w);
					  this.sliderWidth=w;
					  //计算偏移量  让导航条下面的红条跟随点击运动
					  //最左边的间距 +文字大小 +间隙
					  this.sliderOffset=index*(w+16)+80
					  this.tarwidth=w
				  }).exec()
				 })
				},
			//请求视频列表
			getVideoList(){
				// let params={offset:10}
				apis.video.apiGetVideoList().then(res=>{
					console.log('111',res);
				})
			},
			//dowCallback下拉刷新你
			dowCallback(){},
			//上拉
			upCallback(){}	
	},
	}
</script>

<style lang="scss">
	.topbar {
		.h86 {
			height: 86rpx;
		}
	}

	.scroll-view {
		position: fixed;
		top: 0;
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		text-align: center;
		line-height: 86rpx;
		color: #333;
		font-weight: 600;
		border-bottom: 1rpx solid #e6e6e6;
		z-index: 10;
		background: #fff;

		.item {
			position: relative;
			display: inline-block;
			min-width: 126rpx;
			height: 86rpx;
			line-height: 86rpx;
			padding: 0 20rpx;

			&.active {
				color: #f32628;
			}
		}
	}

	.slide {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		left: 0;
		bottom: 0rpx;
		background: #f32628;
		transition: transform 0.3s;
		z-index: 2;
		/* #ifdef MP-WEIXIN */
		bottom: 2rpx;
		/* #endif */
	}

	.video-list {
		color: #333;
		background: #f8f8f8;

		.tit-bar {
			padding-left: 32rpx;
		}

		.video-item {
			padding-top: 32rpx;
			background: #fff;
			border-bottom: 24rpx solid #f8f8f8;
		}

		.video-wrap {
			width: 686rpx;
			margin: 0 auto;
		}

		.img {
			display: block;
			width: 686rpx;
			height: 390rpx;
			border-radius: 10rpx;
			background: #eee;
		}

		.desc {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 84rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}

	.creater-bar {
		height: 100rpx;
		justify-content: space-between;
		align-items: center;

		.avactor-box {
			align-items: center;
		}

		.avactor {
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
			border-radius: 66rpx;
			background: #eee;
		}

		.name {
			line-height: 100rpx;
		}
	}
</style>