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>
