问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue，后端传递数据为一个数组，怎么呈现出一条条动态加载的样子，而不是直接呈现出来，用的组件是iview？

头像
Eternity
    964052
    头像
    Jenny
      84921212

      希望前端收到一个数组，比如[A,B,C,D]，可以有间隔的展示A,B,C,D，有种动态加载的感觉，而不是一起刷新出A,B,C,D四条数据，由于vue响应式的原因，暂时没找到解决办法，不知道有没有办法 或者通过iviewUI是否可以做到？？

      javascripthtml5csshtml
      阅读 2k
      1 个回答
      得票最新
      头像
      papersnake
        12k31739
        ✓ 已被采纳

        这个用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 href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" 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>

        写了个例子给你

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题