如下:wxml中的list里面包含很多列表item,每次显示2个,循环滚动,每次滚动间隔3s
transition: transform {{ translate_y == 0 ? 0 : '.5s' }}; 当translate_y 为0的时候,回到第一个列表,为了防止回到第一个列表时,滚动很多条到第一条的的效果,过渡置为0即可
<view class="group-list"
style="transition: transform {{ translate_y == 0 ? 0 : '.5s' }};transform:translateY({{ translate_y }}px)" >
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
2. 用拿到的item数/2。算出要滚动多少次,到底之后回到第一个
/**
* 组件的初始数据
*/
data: {
scrollOnceTime:3000, //每次滚动间隔
listLen : 11,
translate_y : 0
},
// 拼团列表滚动
groupScroll(){
let index = 0
const allLen = Math.floor( this.data.listLen/2)
setInterval(()=>{
if(index >= allLen){
index = 0
}else{
index++
}
this.setData({
translate_y: index == 0 ? 0 : -(index * 110)
})
console.log(this.data.translate_y)
},this.data.scrollOnceTime)
},