VUE 列表滚动效果

transition实现动效

 - DOM 部分

<div class="scroll_bg">
     <ul class="scroll_content" :style="{ top }">
        <li v-for="(item,index) in invit_info.text_roll">{{item}}</li>
     </ul>
</div>

 - export default 部分

data () {
    return {
        invit_info:{
            client_money_name:'阅读币',
            text_roll:['张三金','王五成功邀请小二，获1460阅读基金','是游戏，获基金','XX']
        },
        activeIndex: 0
    }
}，
computed: {
    top() {
      return - this.activeIndex * 2.5 + 'rem';
    }
},
mounted(){
    let _this = this; 
    setInterval(function(){
      if(_this.activeIndex < _this.invit_info.text_roll.length-1) {
        _this.activeIndex +=1;
      } else {
        _this.activeIndex = 0;
      }
    }, 1000);
 },

 - style部分

.scroll_bg{
  background-color: #ffbaba;
  height: 2.5rem;
  overflow: hidden;
  position: relative;
}
.scroll_content{
  position: relative;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
}
.scroll_content li{
  height: 2.5rem;
  line-height: 2.5rem;
}

---

备注：此例子应用于：money_front_v2 ‘新媒体云服务平台’客户端红包活动组件中，为实现滚动显示，用户邀请好友获得阅读币的情况