第一种长按不能暂停,效果图如下所示
.wxml
<view class="lucky">
<view class="lucky-top">本期幸运儿</view>
<view class="lucky-swiper">
<view class="lucky-position" style="top:-{{move}}px;" id="lucky-curin">
<view class="lucky-for" wx:for="{{detail}}" wx:key="index" data-index="{{index}}">
<view>{{item.name}}</view>
<view>{{item.text}}</view>
</view>
</view>
</view>
</view>
.wxss
view{
box-sizing: border-box;
}
.lucky{
width: 600rpx;
height: 185px;
margin: 50rpx auto;
padding: 0 3%;
color: #fff;
background-image: linear-gradient(45deg, #9000ff, #5e00ff);
}
.lucky-top{
width: 100%;
float: left;
overflow: hidden;
font-weight: bold;
font-size: 36rpx;
height: 35px;
line-height: 35px;
}
.lucky-swiper{
width: 100%;
height: 350rpx;
float: left;
overflow: hidden;
position: relative;
}
.lucky-position{
width: 100%;
float: left;
position: absolute;
}
.lucky-for{
width: 100%;
float: left;
height: 30px;
line-height: 30px;
}
.lucky-for>view{
width: 50%;
float: left;
font-size: 24rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.lucky-for>view:nth-child(2){
text-align: right;
}
.js
Page({
data: {
detail: [
{ name: '1010753897', text: '测试奖品1' }, { name: '1010753897', text: '测试奖品2' },
{ name: '1010753897', text: '测试奖品3' }, { name: '1010753897', text: '测试奖品4' },
{ name: '1010753897', text: '测试奖品5' }, { name: '1010753897', text: '测试奖品6' },
{ name: '1010753897', text: '测试奖品7' }, { name: '1010753897', text: '测试奖品8' },
{ name: '1010753897', text: '测试奖品9' }, { name: '1010753897', text: '测试奖品10' },
],
move:0,
},
onShow:function(e){
let that = this
let wirel= setInterval(function () {
that.setData({
move: that.data.move+1,
})
},50)
let king = setInterval(function () {
let detail = []
for(let i = 1;i<that.data.detail.length;i++){
detail.push(that.data.detail[i])
}
detail.push(that.data.detail[0])
that.setData({
detail:detail,
move:0,
})
}, 1550)
},
onLoad: function (options) {
let detail = this.data.detail
for (let i = 0; i < detail.length; i++) {
detail[i].name = detail[i].name.substring(0, detail[i].name.length - 3) + '***'
}
this.setData({
detail: detail
})
},
})
第二种长按能够暂停 松开会继续滚动,效果图如下所示
.wxml
<view class="lucky">
<view class="lucky-top">本期幸运儿</view>
<swiper class="lucky-swiper" vertical="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="2000" display-multiple-items='5'>
<block wx:for="{{detail}}" wx:key="index" data-index="{{index}}">
<view class="lucky-for">
<swiper-item catchtouchmove="stopTouchMove">
<view>{{item.name}}</view>
<view>{{item.text}}</view>
</swiper-item>
</view>
</block>
</swiper>
</view>
.wxss
view{
box-sizing: border-box;
}
.lucky{
width: 600rpx;
height: 420rpx;
margin: 50rpx auto;
padding: 0 3%;
color: #fff;
background-image: linear-gradient(45deg, #9000ff, #5e00ff);
}
.lucky-top{
width: 100%;
float: left;
overflow: hidden;
font-weight: bold;
font-size: 36rpx;
height: 70rpx;
line-height: 70rpx;
}
.lucky-swiper{
width: 100%;
height: 350rpx;
float: left;
overflow: hidden;
}
.lucky-for{
width: 100%;
float: left;
line-height: 70rpx;
}
.lucky-for>swiper-item>view{
width: 50%;
float: left;
font-size: 24rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.lucky-for>swiper-item>view:nth-child(2){
text-align: right;
}
.js
Page({
data: {
detail:[
{ name: '1010753897', text: '测试奖品1' }, { name: '1010753897', text: '测试奖品2' },
{ name: '1010753897', text: '测试奖品3' }, { name: '1010753897', text: '测试奖品4' },
{ name: '1010753897', text: '测试奖品5' }, { name: '1010753897', text: '测试奖品6' },
{ name: '1010753897', text: '测试奖品7' }, { name: '1010753897', text: '测试奖品8' },
{ name: '1010753897', text: '测试奖品9' }, { name: '1010753897', text: '测试奖品10' },
],
},
onLoad: function (options) {
let detail = this.data.detail
for(let i = 0;i< detail.length;i++){
detail[i].name = detail[i].name.substring(0, detail[i].name.length-3)+'***'
}
this.setData({
detail:detail
})
},
stopTouchMove:function(e){
return false
}
})
有什么问题欢迎评论留言,我会及时回复你的