uniapp 苹果商店自动滑动效果

最新推荐文章于 2025-10-30 11:22:42 发布

原创最新推荐文章于 2025-10-30 11:22:42 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #uniapp #特效

笔记专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何使用WXML和WXSS实现滚动视图的水平滚动及元素的动画效果，通过具体代码示例展示了如何设置滚动条的位置、速度和无限循环动画。

<view>
			<scroll-view class="wrap" scroll-x="true" scroll-left="120">
				<view class="kkkk">
					<view class="flex-row">
						<view class="wh bg-blue">1</view>
						<view class="wh bg-blue">2</view>
						<view class="wh bg-blue">3</view>
						<view class="wh bg-blue">4</view>
						<view class="wh bg-blue">5</view>
						<view class="wh bg-blue">6</view>
					</view>
				</view>
			</scroll-view>
		</view>


.kkkk {
		display: inline-block;
		-webkit-animation: mymove 40s linear infinite;
		-o-animation: mymove 40s linear infinite;
		position:relative;
		/* animation: mymove 5s infinite;
		animation-timing-function: linear; */
	}

	@keyframes mymove {
		from {
			right: 0%;
		}

		to {
			right: 50%;
		}
	}

	@-webkit-keyframes mymove

	/* Safari and Chrome */
		{
		from {
			right: 0%;
		}

		to {
			right: 50%;
		}
	}