实现效果
大长图可以横向滑动滚动,并且滑动到最右边切换指示器

代码实现
实现逻辑:
1.将原有滑动条隐藏,
2.计算滑动盒子的宽度与屏幕宽度的差值,如果与滑动的距离无限接近,那就说明已经滑动到了最右边。
第一个指示器是控制css样式,第二个指示器是滑动效果
<template>
<div>
<div class="container">
<div class="container-item">
<img src="../../assets/tree.jpg" alt="">
</div>
</div>
<div class="indicator">
<span :class="{bgcolor:leftColor}" ></span>
<span :class="{bgcolor:rightColor}"></span>
</div>
<!--指示器滑动的效果-->
<div class="indicator"

本文介绍了如何使用JavaScript和CSS实现一个可滑动的大长图,当滑动到最右边时切换指示器颜色和位置,通过监听scroll事件实时调整滑动效果。
最低0.47元/天 解锁文章
4747





