uni-app 在样式里设置变量值，现实样式值动态修改

     在样式里使用 var(变量名称) ，变量名称必须以 -- 开头 ，否则无效。如：var(--myfirst)

<style scoped>
  
  .animation
  {
    position:relative;
    animation:myfirst 1s linear;
    animation-fill-mode: both;    
  }
  
/*  @keyframes myfirst{100% { top:-10px;}} */
  @keyframes myfirst{100% { top:var(--myfirst);}}
</style>

      随后在data加入temp 变量。 试了其他名称 tempss 好像也不起作用 ，只能使用 temp名称了。

变量名称和需要赋值的内容必须字符串包裹起来。如：temp: '--myfirst: 0px;'

<script>
  export default {
    data() {
      return {
        temp: '--myfirst: 0px;'
      }
    },
    onLoad() {
        const query = uni.createSelectorQuery().in(this);
        query.select('#goods_'+id).boundingClientRect(data => {
          this.translateY = '-' + (data.top - 20) + 'px';
          
          this.temp = '--myfirst:'+this.translateY+';';
        }).exec();
    }
  }
</script>

      最后一步需要在vue里面引入 temp 样式才会起作用

<template>
  <view :style="temp"></view>
</template>