首页 > 其他 > 详细

00 | 快应用开发

时间:2019-05-27 00:47:07      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:-i   pan   img   css   ica   会同   策略   class   highlight   

场景:

  快应用前端开发中,遇到多次快速点击上下箭头进行切换的button,会有短暂的上下箭头同时出现的情况。

 

源代码:

<div if="{{!isup}}">
    <img src="/Common/img/down.png" />                            
</div>
<div if="{{isup}}">
    <img src="/Common/img/up.png" />                            
 </div> 

showMoreApp() {
        let self = this
        self.isup = !self.isup
}

问题剖析:

  经过排查,理论上来说,使用一个开关就可以达到这个目的,但是在QA测试环节,快速多次进行切换上下箭头的图片,就会同时出现。

 

解决方案:

<div class="{{imgShowStyle}}">
    <img class="func-list-left-div-middle-img" src="/Common/img/up.png" />                            
</div>

增加变量:imgShowStyle: ‘img-show-normal‘

 

css样式:

.img-show-normal {

    transform: rotate(360deg);

}

.img-show-reverse {

    transform: rotate(180deg);

}

Js代码:

showMoreApp() {
  let self = this
  if(self.imgShowStyle === ‘img-show-normal‘) {
    self.imgShowStyle = ‘img-show-reverse‘
  } else {
    self.imgShowStyle = ‘img-show-normal‘
  }
  self.isup = !self.isup
}

 

将原来使用两张图的策略,调整为只使用一张图,然后修改这一张图的css样式,然后那个问题就没有再复现了。

 

00 | 快应用开发

标签:-i   pan   img   css   ica   会同   策略   class   highlight   

原文:https://www.cnblogs.com/hututu77/p/10928371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号