解決 iview spin元件在android手持裝置上靜止不動

Question

我有使用iview裡的spin元件來當過場動畫
在chrome debug時都能正常的轉圈圈
但是當我將APP載進Android裡執行時
spin只會在畫面靜止不動

請問我程式碼哪裡有遺漏什麼?還是本身是裝置的問題?

<template>
<div>
    <spin class="loading_bar">
    <Icon  type="load-a"  size=180 class="demo-spin-icon-load"></Icon>
    </spin>
</div>
</template>

<script>
export default {
name: 'bars',
props: [],
data () {
return { }
    }
}

</script>
<style scoped>
.loading_bar{
  position: fixed; /*全屏模式下，position是fixed */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:rgb(255, 255, 255,0.5);
  /* opacity: 0.5; */
}
 .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
    position: absolute; /*全屏模式下，position是fixed */
    top: 35%;
    left: 35%;
    }
</style>

這是我要使用的頁面

<template>
            <bars v-if="bars"></bars>
</template>

<script>
import bars from './spincircle'

export default {
  name: 'IMPS03002',
  components: {
    bars

  },
  data () {
    return {
      bars:   false,
    
      header: {
        
      },
      lines: []
    }
  },
  computed: {

  },
  methods: {

     getHeaderLines: function () {

      this.bars=true
      this.status = ''
      var vm = this
      fetch(this.domain + '/WIPF/IMPS_API.do?reqCode=imps03002GetHeaderLines', {
        method: 'POST',
        body: JSON.stringify(this.$data)
      })
        .then(response => response.json())
        .then(data => {
          this.bars=false
          console.log(data)
          if (data.result === 'Y') {
            vm.status = ""
            this.header = data.header
            this.lines = data.lines
            // this.$Message.success('搜尋完畢');
          } else {
            // vm.status = data.errMsg
            this.lines = ""
            // this.$Message.error('無效的ASN號碼!!!請檢查')
            this.$Message.error(data.errMsg);
          }
        })
        .catch(e => {
              this.bars=false
          console.log(e)
          this.$Message.error(e);
          // vm.status = e
        })
    },

}

Answer 1

可以尝试：

.demo-spin-icon-load{
  -webkit-animation:ani-demo-spin 1s linear infinite;
  animation:ani-demo-spin 1s linear infinite;
}

或者由于你的 Webview 版本太低不支持相关动画