小程序css实现容器内 数据滚动 无缝衔接 点击暂停

bash 复制代码
<view class="gundongBox">
				<!-- 滚动展示信息的模块 -->
				<image class="imgWid" :src="imgurl+'gundong.png'" mode="widthFix"></image>
				<view class="gundongView">
					<view class="container">
						<view class="scroll-container"
							:style="{ animationPlayState: autoScroll ? 'running' : 'paused',animationDuration:list.length>0?list.length +'s':0+'s' }" @touchstart="pauseScroll"
							@touchend="resumeScroll">
							<view v-for="(item, index) in list" :key="index" class="item">
								{{ item }}
							</view>
							<!-- 复制一份实现无缝循环 -->
							<view v-for="(item, index) in list" :key="'copy-'+index" class="item">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
bash 复制代码
<script>
	export default {
		components: {},
		data() {
			return {
				list: ["a", "b", "c"],
				autoScroll: true,
				resumeTimer: null
			}
		},
		onLoad(options) {
			// console.log("接收的参数",options)
		},
		methods: {
			pauseScroll() {
				this.autoScroll = false;
				clearTimeout(this.resumeTimer);
			},
			resumeScroll() {
				this.resumeTimer = setTimeout(() => {
					this.autoScroll = true;
				}, 2000);
			}
		}
	}
</script>
bash 复制代码
<style>
.gundongView {
		height: 500rpx;
		overflow: hidden;
	}
.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.scroll-container {
	  /* height: 300px; */
	  width: 80%;
	  overflow: hidden;
	  position: relative;
	  border: 1px solid #eee;
	  animation: scroll 20s linear infinite; 
	  /* 默认执行20s */
	}
	
	@keyframes scroll {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-50%);
	  }
	}
	
	.item {
	  padding: 20rpx;
	  border-bottom: 1px solid #f0f0f0;
	}
</style>
相关推荐
世界哪有真情3 分钟前
Trae 蓝屏问题
前端·后端·trae
Moment6 分钟前
NestJS 在 2025 年:对于后端开发者仍然值得吗 😕😕😕
前端·后端·github
热心市民小岳7 分钟前
Konva.js 实现 腾讯文档 多维表格
前端·javascript
砺能8 分钟前
uniapp生成的app添加操作日志
前端·uni-app
一匹电信狗12 分钟前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
小Dno113 分钟前
diff算法理解第一篇
前端
文心快码BaiduComate13 分钟前
文心快码实测Markdown排版工具开发
前端·后端·程序员
杨超越luckly16 分钟前
HTML应用指南:利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
yuqifang30 分钟前
DevEco Studio工具在打hap包时,Product选项(default,release)和 Build Mode(default,release)区别
前端
朝与暮31 分钟前
《深入浅出编译原理 -- 编译原理总述(一)》
前端·编译原理·编译器