公司小程序项目需求要做一个公告消息，刚开始用小程序swiper组件实现了，效果也不做，有个问题就是，滚动的时候用手指可以滑动，这就尴尬了(产品不允许啊)，可是swiper组件又不能禁止手指滑动，另想办法 ~

下面这种方法 vue同样可以用 非常方便 效果也不错 大家可以试试 直接上代码：

wxml:
 
<view class="{{animate?'marquee_top':''}}">
   <view wx:for="{{msgList}}" wx:key="index" class="swiper_item">{{item.phone}}已获得{{item.money}}元现金奖励</view>
</view>


js:

data:{
    animate: false,
    msgList: [
     {
       phone: "150****2569",
       money: 200
     },
     {
       phone: "151****2569",
       money: 300
     },
     {
       phone: "155****2569",
       money: 400
     },
     {
       phone: "158****2569",
       money: 500
     }
   ]
}

onLoad(){
     setInterval(this.showMarquee, 2000);
},
showMarquee() {
   this.setData({
     animate: true
   });
   setTimeout(() => {
     this.data.msgList.push(this.data.msgList[0]);
     this.data.msgList.shift();
     this.setData({ animate: false, msgList: this.data.msgList });
   }, 500);
 }
 
 
 css:
 .marquee_top {
     transition: all 0.5s;
     margin-top: -60rpx;
  }
 
复制代码