uniapp导航栏点击切换特效 下边框跟随动态变化_uni-app 动态设置边框

前言

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235