当前位置：首页 > news >正文

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

news 来源：原创 2025/5/10 7:57:07

<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>

<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>

<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>