按钮动态效果

Author: nuochong

app/components/example/Main.vue

@@ -25,10 +25,9 @@
                 <Button class="btn btn-primary m-t-20" text="animateCSS" @tap="animate" />
                 <Button class="btn btn-primary m-t-20" text="下拉刷新" @tap="refresh" />
                 <Button class="btn btn-primary m-t-20" text="下拉刷新❤新" @tap="refreshNew" />
+                <Button class="btn btn-primary m-t-20" text="触摸事件" @tap="touch" />
             </StackLayout>
-
             <!-- </GridLayout> -->
-
         </ScrollView>
     </Page>
 </template>
@@ -50,6 +49,7 @@ import Pop from "./pop";
 import Animate from "./animate";
 import Refresh from "./refresh";
 import RefreshNew from "./refreshNew";
+import Touch from "./touch";
 
 export default {
   data () {
@@ -59,6 +59,9 @@ export default {
   },
   mounted () { },
   methods: {
+    touch: function () {
+      this.$navigateTo(Touch);
+    },
     refreshNew: function () {
       this.$navigateTo(RefreshNew);
     },

app/components/example/refreshNew.vue

@@ -35,12 +35,23 @@ export default {
       num: 0,
       isStart: false,
       isTime: true,
+      //下拉信息
+      pull_to_refresh:'下拉可以刷新',
+      release_to_refresh:'释放立即刷新',
+      refreshing:'正在刷新…',
+      not_updated_yet:'暂未更新过',
+      updated_at:'上次更新于%1$s前',
+      updated_just_now:'刚刚更新',
+      time_error:'时间有问题'
     };
   },
   mounted () {
     this.pageLoaded();
   },
   methods: {
+    setIsAbleToPull:function(){
+      
+    },
     pageLoaded: function (args) {
 
     },
@@ -73,7 +84,7 @@ export default {
     onDrawerPan (side, args) {
       let ht = this.$refs.ht.nativeView;
       if (ht.marginTop < 0 && this.isStart) {
-        ht.marginTop = ht.marginTop + 5;
+        ht.marginTop = ht.marginTop + 1;
       } else {
         if (this.isTime) {
           this.isTime = false;

app/components/example/touch.vue

@@ -0,0 +1,101 @@
+<template>
+    <Page loaded="pageLoaded" ref="page">
+        <ActionBar class="action-bar" title="Hello">
+            <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
+        </ActionBar>
+        <GridLayout colums="*" rows="*">
+            <Button class="btn btn-primary m-t-20" ref="btn" text="触摸" @tap="touch" />
+        </GridLayout>
+    </Page>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      msg: "Hello World! ",
+      glyphs: []
+    };
+  },
+  mounted () {
+  },
+  methods: {
+    touch: function () {
+
+      let btn = this.$refs.btn.nativeView;
+      console.log('');
+      btn.android.setOnTouchListener(new android.view.View.OnTouchListener({
+        onTouch: function (view, motionEvent) {
+          // var action = motionEvent.getAction();
+          // if (action === android.view.MotionEvent.ACTION_DOWN) { 
+          //   console.log('######')
+          // }
+          // if (action === android.view.MotionEvent.ACTION_UP) { 
+          //   console.log('@@@@@@')
+          // }
+          // return false;
+          let scale = '0.7f'
+          let duration = 150;
+          let interpolator= new android.view.animation.DecelerateInterpolator();
+          //按钮点击效果
+          let v = view;
+          let event = motionEvent;
+          let MotionEvent = android.view.MotionEvent;
+          switch (event.getAction()) {
+            case MotionEvent.ACTION_DOWN:
+              console.log('按下了');
+              v.animate().scaleX(scale).scaleY(scale).setDuration(duration).setInterpolator(interpolator);
+              v.setPressed(true);
+              break;
+
+            case MotionEvent.ACTION_MOVE:
+              let x = event.getX();
+              let y = event.getY();
+              let isInside = (x > 0 && x < v.getWidth() && y > 0 && y < v.getHeight());
+              if (v.isPressed() != isInside) {
+                v.setPressed(isInside);
+              }
+              break;
+            case MotionEvent.ACTION_CANCEL:
+              v.setPressed(false);
+              v.animate().scaleX(1).scaleY(1).setInterpolator(interpolator);
+              break;
+            case MotionEvent.ACTION_UP:
+              v.animate().scaleX(1).scaleY(1).setInterpolator(interpolator);
+              if (v.isPressed()) {
+                v.performClick();
+                v.setPressed(false);
+              }
+              break;
+          }
+          return true;
+        }
+      }));
+      console.log('点击了触摸');
+    }
+  }
+};
+</script>
+
+<style scoped>
+ActionBar {
+  background-color: #53ba82;
+  color: #ffffff;
+}
+
+.message {
+  vertical-align: center;
+  text-align: center;
+  font-size: 20;
+  color: #333333;
+}
+.icons {
+  font-family: "icomoon";
+  font-size: 48;
+}
+.icon {
+  font-family: iconfont;
+  font-size: 48;
+}
+</style>

app/main.js

@@ -5,6 +5,7 @@ import store from './store';
 import { prototype } from 'stream';
 //import VueDevtools from 'nativescript-vue-devtools'
 
+
 const application = require('tns-core-modules/application');
 
 // Vue.use(VueDevtools)