在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ vue，后端傳遞數(shù)據(jù)為一個數(shù)組，怎么呈現(xiàn)出一條條動態(tài)加載的樣子，而不是直接呈現(xiàn)出

vue，后端傳遞數(shù)據(jù)為一個數(shù)組，怎么呈現(xiàn)出一條條動態(tài)加載的樣子，而不是直接呈現(xiàn)出來，用的組件是iview？

希望前端收到一個數(shù)組，比如[A,B,C,D]，可以有間隔的展示A,B,C,D，有種動態(tài)加載的感覺，而不是一起刷新出A,B,C,D四條數(shù)據(jù)，由于vue響應式的原因，暫時沒找到解決辦法，不知道有沒有辦法 或者通過iviewUI是否可以做到？？

回答
編輯回答
舊螢火

這個用css 動畫就可以解決

http://jsbin.com/lowaxebuve/1...

<!DOCTYPE html>
<html>
<head>
    <title>橫向滑動</title>
    <style type="text/css">
        * {
    padding: 0;
    margin: 0;
}
/* 清除浮動 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
html, body {
    height: 100%;
}
body {
    font-family: "Microsoft YaHei";
    background: #E1E1E1;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    overflow: hidden;
}
.item{
  display: block;
  height: 35px;
  border: 1px solid #449D44;
  margin: 15px;
  line-height: 35px;
  text-align: center;
}
    </style>
</head>
<link  rel="stylesheet">
<script src="http://vuejs.org/js/vue.js"></script>
<body>
      <div id="app">
          <button @click="loaditems">load data</button>
          <div v-if="isloaded" class="item animated bounceInDown" v-for="item,index in items" :key="index" :style="{'animation-delay': index * 0.2 + 's'}">{{item.name}}</div>
        </div>
</body>
<script>
    new Vue({
      el:'#app',
      name:"test",
      data () {
        return {
          isloaded: false,
          items: []
        }
      },
      methods: {
        loaditems(){
          setTimeout(()=>{
            if(!this.isloaded){
              this.items = [
              {
                name: 'tom'
              },
              {
                name:'jerry'
              },
              {
                name:'lily'
              }
              ]
              this.isloaded = true
            } else {
              this.isloaded = false
              this.items = []
            }
            
          },300)
        }
      }
    });
</script>
</html>

寫了個例子給你

2018年7月3日 06:29