00 | 快应用开发

场景：

　　快应用前端开发中，遇到多次快速点击上下箭头进行切换的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样式，然后那个问题就没有再复现了。

 

转载于:https://www.cnblogs.com/hututu77/p/10928371.html