回到顶部按钮及动画

@CONTROL/移动端多项数据控件/CONTROL-BASE.template.ftl

@@ -169,6 +169,7 @@
             </ion-list>
         </#if>
             <div class="no-data" v-if="items.length == 0">暂无数据</div>
+            <div class="scrollToTop" @click="scrollToTop" ref="scroll"> <van-icon name="back-top" /></div>            
         </div>
     </div>
 </template>
\ No newline at end of file

@CONTROL/移动端多项数据控件/CONTROL-BASE.vue.ftl

@@ -876,12 +876,19 @@
      *
      * @memberof ${srfclassname('${ctrl.codeName}')}
      */
+    /**
     public mounted(){
-      let list:any = this.$refs.mdctrl;      
+      let list:any = this.$refs.mdctrl;
+      let scroll:any = this.$refs.scroll;        
       if(list){
         list.addEventListener('touchend',()=>{
           this.$store.commit('setPopupStatus',true)
-        })
+        }, false)
+        list.addEventListener('scroll', (e:any) => {
+          if (scroll && list) {
+            scroll.style.opacity = list.scrollTop * 0.001;
+          }
+        }, false)
       }
     }
 
@@ -1095,6 +1102,27 @@
         })
 
     }
+
+     /**
+     * 滑回顶部
+     *
+    * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public scrollToTop(){
+      let mdctrl:any = this.$refs.mdctrl;
+      if (mdctrl) {  
+        requestAnimationFrame(function () {
+          let top:number = mdctrl.scrollTop;
+          let speed:number = top / 6;
+          if (top!= 0) {
+              mdctrl.scrollTop -= speed;
+          }
+        });
+        if (mdctrl.scrollTop != 0) {
+          requestAnimationFrame(this.scrollToTop);
+        }
+      }
+    }
 <#ibizinclude>
 ../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
 </#ibizinclude>

@CONTROL/移动端多项数据控件/CONTROL.less.ftl

@@ -21,6 +21,7 @@
 }
 .app-mob-mdctrl{
     height:100%;
+    overflow: auto;
     .app-mob-mdctrl-${ctrl.name}{
         height:100%;
         .items{
@@ -78,6 +79,23 @@
                 margin-top:0;
             }
         }
+        .scrollToTop{
+          opacity: 0;
+          position: absolute;
+          right: 20px;
+          bottom: 120px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          line-height: 40px;
+          text-align: center;
+          background-color: #fff;
+          box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
+          .van-icon{
+            font-size: 20px;
+            color: #333;
+          }
+        }
     }
 }
 <#if appde??>