前端导航栏底部滑块滑动切换功能

最新推荐文章于 2023-12-23 00:18:35 发布

榨杯橙子汁

最新推荐文章于 2023-12-23 00:18:35 发布

阅读量1.5k

点赞数

分类专栏： uniapp 文章标签： html vue.js css

本文链接：https://blog.csdn.net/weixin_41586715/article/details/112497487

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用CSS的transform属性和transition属性，动态改变滑块的位置，以实现导航栏选项切换时滑块跟随移动的效果。示例代码分别展示了uniapp和原生JS的实现方式，详细解释了添加和移除class来控制滑块移动的逻辑。

摘要由CSDN通过智能技术生成

一、实现原理

通过CSS的平移属性来实现滑块跟随滑动（关键属性：transform）

二、使用步骤

1.通过改变括号中X的值来实现滑块左右移动 transform:translateX(x) ；

注：transition-duration: 500ms;滑块的移动时间

代码如下（示例）：

	.noclick {
		transform: translateX(140upx);
		transition-duration: 500ms;
	}

	.click {
		transform: translateX(515upx);
		transition-duration: 500ms;
	}

2.动态添加class

代码如下（示例）：

<view class="between share-nav">
			<text @click="shareNavClick(0)" :class="navClick=== 0 ?'textclick':'notextclick'">邀请海报</text>
			<text @click="shareNavClick(1)" :class="navClick=== 0 ?'notextclick':'textclick'">推广视频</text>
			<view class="slider" :class="navClick=== 0 ?'noclick':'click'"></view>
		</view>

这是uniapp上的写法，如果写的是原生的话可以在评论区问我

原生Js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				margin: 0;
				padding: 0;
			}
			.share-nav {
				position: relative;
				width: 100%;
				height: 50px;
				font-size: 14px;
				background-color: #f4f4f4;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.nav {
				width: 50%;
				text-align: center;
				height: 50px;
				line-height: 50px;
				font-size: 16px;
			}

			.slider {
				background-color: #ff4c2c;
				width: 40px;
				height: 3px;
				border-radius: 50px;
				position: absolute;
				left: 23%;
				bottom: 5px;
			}

			.noclick {
				left: 23%;
				transition-duration: 500ms;
			}

			.click {
				left: 73%;
				transition-duration: 500ms;
			}
		</style>
	</head>
	<body>
		<div class="share-nav">
			<div class="nav" onclick="shareNavClick(0)">邀请海报</div>
			<div class="nav" onclick="shareNavClick(1)">推广视频</div>
			<div id="sl" class="slider noclick"></div>
		</div>
	</body>
	<script>
		var slider = document.getElementById('sl');

		function shareNavClick(i) {
			console.log(i)
			if (i == 0) {
				slider.classList.add("noclick");
				slider.classList.remove("click");
			} else {
				slider.classList.add("click");
				slider.classList.remove("noclick");
			}
		}
	</script>
</html>

榨杯橙子汁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端导航栏底部滑块滑动切换功能

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言主要是点击导航后滑块的跟随效果实现提示：以下是本篇文章正文内容，下面案例可供参考一、实现原理通过css平移属性，改变X轴的数值来实现滑块的..
复制链接

扫一扫

专栏目录