微信小程序无线向上滚动列表

第一种长按不能暂停，效果图如下所示

.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
  }
})

有什么问题欢迎评论留言，我会及时回复你的