精华内容
下载资源
问答
  • Vue 监听手机返回键关闭弹窗 popstate 事件  a.当活动历史记录条目更改时,将触发popstate 事件。  b.如果被激活的历史记录条目是通过对 history.pushState() 的调用创建的,或者受到对 history.replaceState()...

    Vue 监听手机返回键关闭弹窗

    popstate 事件

      a.当活动历史记录条目更改时,将触发 popstate 事件。

      b.如果被激活的历史记录条目是通过对 history.pushState() 的调用创建的,或者受到对 history.replaceState() 的调用的影响,

              popstate 事件的 state 属性包含历史条目的状态对象的副本。

      c.需要注意的是调用 history.pushState() 或 history.replaceState() 不会触发popstate事件。

      d.只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()

     实现代码

      1.  配置路由 meta 的 keepAlive 属性,再 App.vue 中 使用 keep-alive 标签 将当前页面加入缓存中  

    <keep-alive>
      <router-view v-wechat-title="$route.meta.title" v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的试图组件 -->
      </router-view>
    </keep-alive>
    <router-view v-wechat-title="$route.meta.title"  v-if="!$route.meta.keepAlive">
      <!-- 这里是不会被缓存的试图组件 -->
    </router-view>

      2.  打开弹窗调用 window.history.pushState() 函数(此处使用 watch 监听 pop 弹窗是否打开)

    watch: {
      showSku(newVal) {
        if (newVal) {
          // 不刷新页面,更改页面的url
          window.history.pushState(null, null, '#/shop/goodsdetail?id='+this.$route.query.id)
        }
      }
    },

      3.  activated 生命周期 监听 popstate 事件 ,deactivated 生命周期 移除 popstate 事件 

    activated () {
      window.addEventListener('popstate', this.popstate, false)
    },
    deactivated () {
      window.removeEventListener('popstate', this.popstate, false)
    },

      4.  事件监听函数

    popstate() {
      if (this.showSku) {
        this.showSku = !this.showSku
      } else {
        this.$router.go(-1)
      }
    },

     

    拓展

    一、历史记录前进与后退

    1.后退:

    window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮;

    2.前进:

    window.history.forward() -- 相当于用户在浏览器的工具栏上点击前进按钮;

    3.移动到指定历史记录点:

    通过go()方法,指定一个相对于当前页面位置的数值,从当前会话的历史记录中加载页面(当前位置页面索引:0,上一页:-1,下一页:1);

    window.history.go(-2)--后退2页,相当于调用两次back();

    window.history.go(1)--前进1页,相当于调用forward();

    *可以通过window.history.length,得到历史记录栈中一共有多少页。

    二、添加/修改历史记录条目

    1.pushState(stateObject,title,URL):

    逐条添加历史记录条目,

    a.状态对象(stateObject)--一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝;(ps:FireFox浏览器强行限制状态对象的大小为640k,超出则抛异常,可通过sessionStorage或localStorage存储大的数据)

    b.标题(title)--传入一个简短的标题,标明将要进入的状态;(FireFox浏览器目前会忽略该参数,但是传一个空字符串会比较安全)

    c.地址(URL)--新的历史记录条目的地址(可选,不指定的话则为文档当前URL);浏览器不会在调用pushState()方法后加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。

    *某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。

     

    2.replaceState():

    history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

    3.popstate():

    每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

    读取当前状态:

    如果页面中使用pushState()或replaceState()方法设置了一个状态对象,然后用户重启了浏览器。当页面重新加载时,页面会触发onload事件,但不会触发popstate事件。可以使用history.state直接读取当前历史记录条目的状态,而不需要等待popstate事件

    调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法)。

    调用方法:

    window.onpopstate = function(event) {
       //做一些操作
       event.state; //  当前历史记录条目的状态 
    };

    或 

    window.addEventListener('popstate', (event) => {
      //做一些操作
    });

                                                                                                                                                                                 --资料来源MDN

     

     

     

    https://www.cnblogs.com/wyx-remove-love/p/wyx-20190510-1.html

    展开全文
  • 详情页面内点击下一人时更新数据,点击手机返回键需要在当前路由显示上一人的数据;点击返回列表页按钮返回go()而不是路由跳转router.push到列表页。

    最近做的一个公众号项目需要在一个列表页面跳转到详情页上时实现一个效果,详情页面内点击下一人时更新数据,点击手机返回键需要在当前路由显示上一人的数据;点击返回列表页按钮go()而不是路由跳转router.push到列表页。
    具体场景描述:
    1,上一页是一个列表list,下一个是人员详情detail;
    2,点击列表内某条进入详情detail;
    3,detail页面底部两个fixed btm0按钮,返回列表页和查看下一人;
    4,点击原生返回键返回到上一个人;

    实现方法:
    list页面点击li需要跳转detail页面时将列表数据存下来,带上query参数,在detail监听query的变化,query发生变化时请求接口。
    上代码:

    ·list·
    <div class="content_dv">
      <h4>人员列表</h4>
      <van-tabs v-model="activeTab">
        <van-tab title="列表一">
          <ul>
            <li v-for="(item,index) in list1" :key="index" @click="toDetail(index,1,item,stage)">
              <span>{{item.name}}</span>
            </li>
          </ul>
        </van-tab>
        <van-tab title="列表二">
          <ul>
            <li v-for="(item,index) in list2" :key="index" @click="toDetail(index,0,item,stage)">
              <span>{{item.name}}</span>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    
    ·list·
    methods:{
        toDetail(index,curList,itemObj,stageId){//跳转到详情页面
            curList==1?localStorage.setItem('menList',JSON.stringify(this.list1)):localStorage.setItem('menList',JSON.stringify(this.list2));//任务详情 已完成/未完成人员列表数据
            this.$router.push({
                path: "/detail",
                query: {
                    index:index,//当前人下标
                    curList:curList,//是列表1或列表2
                    name:sObj.name,
                    stageId:stageId,//当前列表id
                }
            });
        },
    }
    
    ·detail·
    watch: {
        '$route.query.index': function () {
            this.pageQuery = this.$route.query;
            this.getData();//请求接口数据
        }
    },
    created() {
        this.pageQuery = this.$route.query;
        sessionStorage.setItem('detailPersonIndex',this.$route.query.index);
        this.getData();
    },
    methods:{
        toPersonIndex(){//返回列表页
            let returnIndex = Number(this.$route.query.index) - Number(sessionStorage.getItem('detailPersonIndex')) + 1;
            this.$router.go(-returnIndex);
        },
        toNextDetail(){//查看下一人的详情页面
          let arrIndex = Number(this.$route.query.index);
          if ( arrIndex == (this.menList.length-1) ) {//this.menList:前一页缓存的人员列表
            return false;
          }
          this.loadShow = true;
          this.$router.push({
            query: {
              index:arrIndex+1,
              curList:this.$route.query.curList,
              stageId:this.$route.query.stageId,
              name:this.menList[arrIndex+1].name,
            },
          });
        },
    },
    
    展开全文
  • 在Activity,Service,Window中监听Home键和返回键的一些思考,如何把事件传递出来的做法! 其实像按键的监听,我相信很多人都很熟练了,我肯定也不会说这些基础的东西,所以,前期,还是一笔带过一下,我们重点说...

    在Activity,Service,Window中监听Home键和返回键的一些思考,如何把事件传递出来的做法!


    其实像按键的监听,我相信很多人都很熟练了,我肯定也不会说这些基础的东西,所以,前期,还是一笔带过一下,我们重点说下后半部分吧

    一.Activity监听返回键

    这个其实大家都知道,首先我们要了解流程,你要屏蔽这个返回键,那你就要拿到这个返回键的事件了,所以我们要监听了,而在Activity中,有两种做法,首先,系统是提供了返回键的监听的

        /**
         * 返回键监听
         */
        @Override
        public void onBackPressed() {
            //super.onBackPressed();
        }

    我们只要不让使用父类的onBackPressed方法,那返回键就没作用了,还有一种办法就是系统提供的按键监听的方法了

        /**
         * 按键监听
         * @param keyCode
         * @param event
         * @return
         */
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    //返回键
                    Toast.makeText(this,"返回键",Toast.LENGTH_SHORT).show();
                    break;
            }
            return super.onKeyDown(keyCode, event);
        }

    onKeyDown是按下的动作,键盘按下的动作就可以,他可以监听到很多的按键,比如数字键,当然,现在数字键的手机还是比较少的,KeyEvent 为我们封装了绝大多数的监听,我们来看一下演示的效果

    这里写图片描述

    二.Service中监听Home键

    onKeyDown中有监听Home键的方法,但是你会发现监听起来是无效的,这里其实可以通过广播的形式来监听Home键,不光适用在Service,同样的也可以适用在Activity中,我们新建一个HomeService

    package com.liuguilin.keyevevtsample;
    
    /*
     *  项目名:  KeyEvevtSample 
     *  包名:    com.liuguilin.keyevevtsample
     *  文件名:   HomeService
     *  创建者:   LGL
     *  创建时间:  2016/8/20 11:00
     *  描述:    Home键监听
     */
    
    import android.app.Service;
    import android.content.BroadcastReceiver;
    import android.content.Context;
    import android.content.Intent;
    import android.content.IntentFilter;
    import android.os.IBinder;
    import android.widget.Toast;
    
    public class HomeService extends Service {
    
        //监听Home
        private HomeWatcherReceiver mHomeKeyReceiver;
        public static final String SYSTEM_DIALOG_REASON_KEY = "reason";
        public static final String SYSTEM_DIALOG_REASON_HOME_KEY = "homekey";
    
        @Override
        public IBinder onBind(Intent intent) {
            return null;
        }
    
        @Override
        public void onCreate() {
            super.onCreate();
    
            //注册Home监听广播
            mHomeKeyReceiver = new HomeWatcherReceiver();
            final IntentFilter homeFilter = new IntentFilter(Intent.ACTION_CLOSE_SYSTEM_DIALOGS);
            registerReceiver(mHomeKeyReceiver, homeFilter);
        }
    
        @Override
        public void onDestroy() {
            super.onDestroy();
    
            //取消监听
            unregisterReceiver(mHomeKeyReceiver);
        }
    
        /**
         * 监听Home键
         */
        class HomeWatcherReceiver extends BroadcastReceiver {
    
            @Override
            public void onReceive(Context context, Intent intent) {
                String action = intent.getAction();
                if (action.equals(Intent.ACTION_CLOSE_SYSTEM_DIALOGS)) {
                    String reason = intent.getStringExtra(SYSTEM_DIALOG_REASON_KEY);
                    if (SYSTEM_DIALOG_REASON_HOME_KEY.equals(reason)) {
                        Toast.makeText(context, "Home按键", Toast.LENGTH_SHORT).show();
                    }
                }
            }
        }
    }
    

    OK,为了测试,我们加上两个button

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="10dp">
    
        <Button
            android:id="@+id/openHome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="打开Home监听"/>
    
        <Button
            android:id="@+id/closeHome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="关闭Home监听"/>
    
    </LinearLayout>
    

    同时增加两个点击事件

        findViewById(R.id.openHome).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    startService(new Intent(MainActivity.this,HomeService.class));
                }
            });
        findViewById(R.id.closeHome).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    stopService(new Intent(MainActivity.this,HomeService.class));
                }
            });

    对了,别忘记了注册一下Service

     <service android:name=".HomeService"/>

    好的,我们来检验一下效果吧

    这里写图片描述

    OK

    三.在Window中监听返回键

    这里,其实也是我项目中的一个需求,首选,我们先不说逻辑,先把window写好,我们为了阅读性,我们再新建一个Service——WindowService,同时去注册一下

    <service android:name=".WindowService"/>

    而我们的需求,就是启动一个service,service里加载一个window,但是这样做其实是拿不到我们的按键时间的,都给其他人拿走了,但是这些都是后话了,我们先把window的代码写好

    package com.liuguilin.keyevevtsample;
    
    /*
     *  项目名:  KeyEvevtSample 
     *  包名:    com.liuguilin.keyevevtsample
     *  文件名:   WindowService
     *  创建者:   LGL
     *  创建时间:  2016/8/20 11:11
     *  描述:    窗口服务
     */
    
    import android.app.Service;
    import android.content.Context;
    import android.content.Intent;
    import android.graphics.PixelFormat;
    import android.os.IBinder;
    import android.view.View;
    import android.view.WindowManager;
    import android.widget.Button;
    
    public class WindowService extends Service implements View.OnClickListener {
    
        //窗口管理器
        private WindowManager wm;
        //view
        private View mView;
        //布局参数
        private WindowManager.LayoutParams layoutParams;
        //取消window
        private Button btnCloseWindow;
    
        @Override
        public IBinder onBind(Intent intent) {
            return null;
        }
    
        @Override
        public void onCreate() {
            super.onCreate();
            initWindow();
        }
    
        /**
         * 初始化Window
         */
        private void initWindow() {
            //窗口管理器
            wm = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
            //布局参数
            layoutParams = new WindowManager.LayoutParams();
            layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
            layoutParams.height = WindowManager.LayoutParams.MATCH_PARENT;
            layoutParams.flags =
                    //WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE | 不能触摸
                    WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON | WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH;
            //格式
            layoutParams.format = PixelFormat.TRANSLUCENT;
            //类型
            layoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;
    
            mView = View.inflate(getApplicationContext(), R.layout.layout_window_item, null);
            btnCloseWindow = (Button) mView.findViewById(R.id.btnCloseWindow);
            btnCloseWindow.setOnClickListener(this);
        }
    
        @Override
        public int onStartCommand(Intent intent, int flags, int startId) {
            //显示window
            wm.addView(mView, layoutParams);
            return START_STICKY;
        }
    
        @Override
        public void onDestroy() {
            super.onDestroy();
        }
    
        /**
         * 点击事件
         *
         * @param view
         */
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.btnCloseWindow:
                    //取消window
                    wm.removeView(mView);
                    break;
            }
        }
    }
    

    这里有一点要注意的地方,首先,window是需要权限的

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    好的,为了测试,我们些个按钮

         <Button
            android:id="@+id/openWindow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="打开Window"
            android:textAllCaps="false"/>

    同时给他加上点击事件

    findViewById(R.id.openWindow).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    startService(new Intent(MainActivity.this, WindowService.class));
                }
            });

    OK,到这里,我们的window算是写好了,但是写好了,也就出来我们今天要探讨的问题了

    这里写图片描述

    你这个Window,拿不到返回事件,所以我按返回键的时候Activity退出了,window还在,那window就是没有拿到这个事件了,那我们应该怎么去拿到这个事件呢?我们怎么按返回键先退出Window再退出Activity呢?其实我们只要注意这行代码

    mView = View.inflate(getApplicationContext(), R.layout.layout_window_item, null);

    我们这里也是有一个View的,我们可用把这个事件给拦截过来,这都是有可能的,想到了就去做,那我们最终要怎么去做?我们可用重写这个view,把事件通过接口的方式绑定在这个window上,如果不听不明白,你可以跟我一起来看下这段代码,我们这个view,我给他一个容器,那我们就重写LinearLayout

    package com.liuguilin.keyevevtsample;
    
    /*
     *  项目名:  KeyEvevtSample 
     *  包名:    com.liuguilin.keyevevtsample
     *  文件名:   SessionLinearLayout
     *  创建者:   LGL
     *  创建时间:  2016/8/20 11:33
     *  描述:    事件分发/拦截返回按钮
     */
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.view.KeyEvent;
    import android.widget.LinearLayout;
    
    public class SessionLinearLayout extends LinearLayout {
    
    
        private DispatchKeyEventListener mDispatchKeyEventListener;
    
        public SessionLinearLayout(Context context) {
            super(context);
        }
    
        public SessionLinearLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public SessionLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        public boolean dispatchKeyEvent(KeyEvent event) {
            if (mDispatchKeyEventListener != null) {
                return mDispatchKeyEventListener.dispatchKeyEvent(event);
            }
            return super.dispatchKeyEvent(event);
        }
    
        public DispatchKeyEventListener getDispatchKeyEventListener() {
            return mDispatchKeyEventListener;
        }
    
        public void setDispatchKeyEventListener(DispatchKeyEventListener mDispatchKeyEventListener) {
            this.mDispatchKeyEventListener = mDispatchKeyEventListener;
        }
    
        //监听接口
        public static interface DispatchKeyEventListener {
            boolean dispatchKeyEvent(KeyEvent event);
        }
    
    }
    

    我在这里,只是把他作为一个中转站,把事件给传递出来就好了,那我们现在window加载的layout的根布局就是他了

    <?xml version="1.0" encoding="utf-8"?>
    <com.liuguilin.keyevevtsample.SessionLinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0.3"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:orientation="vertical">
    
    
        <Button
            android:id="@+id/btnCloseWindow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关闭窗口"/>
    
    </com.liuguilin.keyevevtsample.SessionLinearLayout>

    那我们的View也是他了,我们直接来看详细的代码吧

    package com.liuguilin.keyevevtsample;
    
    /*
     *  项目名:  KeyEvevtSample 
     *  包名:    com.liuguilin.keyevevtsample
     *  文件名:   WindowService
     *  创建者:   LGL
     *  创建时间:  2016/8/20 11:11
     *  描述:    窗口服务
     */
    
    import android.app.Service;
    import android.content.Context;
    import android.content.Intent;
    import android.graphics.PixelFormat;
    import android.os.IBinder;
    import android.view.KeyEvent;
    import android.view.View;
    import android.view.WindowManager;
    import android.widget.Button;
    
    public class WindowService extends Service implements View.OnClickListener {
    
        //窗口管理器
        private WindowManager wm;
        //view
        private SessionLinearLayout mView;
        //布局参数
        private WindowManager.LayoutParams layoutParams;
        //取消window
        private Button btnCloseWindow;
    
        @Override
        public IBinder onBind(Intent intent) {
            return null;
        }
    
        @Override
        public void onCreate() {
            super.onCreate();
            initWindow();
        }
    
        /**
         * 初始化Window
         */
        private void initWindow() {
            //窗口管理器
            wm = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
            //布局参数
            layoutParams = new WindowManager.LayoutParams();
            layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
            layoutParams.height = WindowManager.LayoutParams.MATCH_PARENT;
            layoutParams.flags =
                    //WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE | 不能触摸
                    WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON | WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH
                           ;
            //格式
            layoutParams.format = PixelFormat.TRANSLUCENT;
            //类型
            layoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;
    
            mView = (SessionLinearLayout) View.inflate(getApplicationContext(), R.layout.layout_window_item, null);
            btnCloseWindow = (Button) mView.findViewById(R.id.btnCloseWindow);
            btnCloseWindow.setOnClickListener(this);
    
            //监听返回键
            mView.setDispatchKeyEventListener(mDispatchKeyEventListener);
        }
        /**
         * 返回鍵监听
         */
        private SessionLinearLayout.DispatchKeyEventListener mDispatchKeyEventListener = new SessionLinearLayout.DispatchKeyEventListener() {
    
            @Override
            public boolean dispatchKeyEvent(KeyEvent event) {
                if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
                    if (mView.getParent() != null) {
                        wm.removeView(mView);
                    }
                    return true;
                }
                return false;
            }
        };
    
        @Override
        public int onStartCommand(Intent intent, int flags, int startId) {
            //显示window
            wm.addView(mView, layoutParams);
            return START_STICKY;
        }
    
        @Override
        public void onDestroy() {
            super.onDestroy();
        }
    
        /**
         * 点击事件
         *
         * @param view
         */
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.btnCloseWindow:
                    //取消window
                    wm.removeView(mView);
                    break;
            }
        }
    }
    

    OK,我们这里只是用了一个小技巧而已,但是在实际开发当中还是很实用的,我们直接来看效果

    这里写图片描述

    好的,本篇博文就先到这里,感谢你的耐心阅读,觉得不错的haunted赞一个哟,有不足的地方也请指正

    Demo下载:http://download.csdn.net/detail/qq_26787115/9608248

    我的群:555974449欢迎一起进来交流!

    展开全文
  • 在做H5页面的时候,为了更好的模拟APP操作,提高用户体验,某些页面弹出提示框的时候,点击返回键隐藏提示框而不是返回到上一个页面 或者在做登录的时候,从A→B→C,我需要从C直接回到A而不经过B,这个时候,就要...

    在做H5页面的时候,为了更好的模拟APP操作,提高用户体验,某些页面弹出提示框的时候,点击返回键隐藏提示框而不是返回到上一个页面
    或者在做登录的时候,从A→B→C,我需要从C直接回到A而不经过B,这个时候,就要拦截返回键自己来定义事件
    总的来说,vue也是js,离不开js

    mounted() {
      // 按需使用:A→B→C就需要页面一进来的时候,就添加一个历史记录
      window.history.pushState(null, null, document.URL);
      // 给window添加一个popstate事件,拦截返回键,执行this.onBrowserBack事件,addEventListener需要指向一个方法
      window.addEventListener("popstate", this.onBrowserBack, false);
    },
    destroyed() {
      // 当页面销毁必须要移除这个事件,vue不刷新页面,不移除会重复执行这个事件
      window.removeEventListener("popstate", this.onBrowserBack, false);
    },
    watch: {
      // 弹框监听,当弹框显示的时候,pushState添加一个历史,供返回键使用
      PopupShow: {
        handler(newVal, oldVal) {
          if (newVal.Terms === true) {
            window.history.pushState(null, null, document.URL);
          }
        },
        deep: true
      }
    },
    methods: {
      onBrowserBack() {
        // 这里写点击返回键时候的事件
        // 比如判断需求执行back()或者go(-2)或者PopupShow=false隐藏弹框
      }
    }
    

    popstate事件需要每个页面单独写,不适合写成公共方法

    展开全文
  • 原标题:Apple Watch上的2个按键是这么玩的点评:苹果不说,但是你要知道的用法。 Apple Watch是苹果全新的产品,代表了苹果全新的设计理念,如此一来,操作和交互方式就与手机自然也有所不同。结果有的小伙伴把苹果...
  • 微媒体第一时间体验更是发现,升级iOS 8.2后,不少App的返回键都出现失灵情况,其中微信表现尤为明显。今日,微信正式发布iOS 6.1.2,新特性包含:可以通过附件栏发微信红包;更换手机时,自定义表情也不会丢失...
  • 最近在做一个小型的vue移动端项目(自己练手),在处理到添加”返回键“的时候遇到的问题,在这里记录一下: 问题:如何通过路由地址的改变控制返回键的显示与隐藏
  • mounted(){ //按需使用:在页面一进来的...//给window添加一个popstate事件,拦截返回键,执行this.onBrowserBack事件,addEventListener需要指向一个方法 window.addEventListener("popstate",this.onReturnBack,fa...
  • // 必须写,否则仍然监控不到返回键的操作 setCancelable(false);  // 必须写上该方法才能监测back事件 dialog.setOnKeyListener(new OnKeyListener() { @Override public boolean onKey...
  • this.$watch 和组件的 watch 有什么区别

    千次阅读 2020-10-18 22:12:41
    watch:一个对象,是需要观察的表达式,值是对应回调函数,也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch(),遍历 watch 对象的每一个 property。 deep: true:将会深度监听对象的 ...
  • Apple Watch简述

    千次阅读 2016-06-13 14:18:19
    2015年4月10日Apple Watch(以下简称watch)开启预售,24日开始正式上市。笔者2015年3月开始研究watch,由于没有真机,所有前期调研和开发都是在模拟器中完成。 watchOS 2 新特点 watchOS 2的Extension不在手机中...
  • image watch

    2016-11-02 15:07:28
    Image Watch(下载)是OpenCV的一款最新工具,它能够即时显示出矩阵的内容,即memory中Mat的信息,方便程序的调试,非常好用。不过目前该插件只支持VS2012,而且不能保存调试信息。 下载地址:点击打开链接 安装...
  • Redis学习之watch命令

    2019-12-15 16:16:28
    Redis unwatch,命令可以监控一个或多个,一旦其中有一个被修改(或删除),之后的事务就不会执行。监控一直持续到 exec 命令(事务中的命令是在exec之后才执行的) 语法 watch 由于watch命令的作用只是当被...
  • AppleWatch开发初探

    千次阅读 2015-09-07 17:45:04
    目录 Apple Watch 简介 为什么要做Apple Watch App 基本概念 开始进行开发 iPhone App、WatchKit Extension和Watch App 三者的关系 主要类 WKInterfaceController WKInterfa
  • vue computed 与 watch 区别

    千次阅读 2017-10-26 16:41:33
    一个对象,是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性 html: js: return{
  • vue之观察者watch

    2018-07-25 16:12:40
    前言:computed和watch区别 computed:监听多个数据或者...watch:只能一个一个监听数据,只要这个数据发生变化,就会返回两个参数,第一个是当前的值,第二个是变化前的值。每当变化的时候,则会触发函数体的逻辑...
  • 如何使用Redis Watch命令

    千次阅读 2020-06-24 18:15:17
    如何使用Redis Watch命令 使用Redis管理数据,理解如何使用事务存储键值对数据很重要。Redis事务与RDMMS事务有些类似,但也有差异。Redis主要通过几个命令有效管理事务,本文讨论Redis的Watch命令以及如何使用。 1. ...
  • 实现商品秒杀之——Redis Watch机制

    千次阅读 2020-01-16 18:28:30
    watch命令可以监控一个或多个,一旦其中有一个被修改或删除,之后的事务就不会执行。监控一直持续到exec命令,事务中的命令是在exec之后才执行的,所以在multi命令后可以修改watch监控的键值。假设我们通过...
  • vue computed和watch详解

    千次阅读 2018-07-26 20:31:05
    computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的,当依赖数据发生变化时,依赖此数据的相关数据会自动变化 2.应用场景 computed处理场景:一个数据受多个数据的影响;watch处理场景:一个数据...
  • vue之watch用法

    2018-09-29 10:50:45
    vue之watch用法 首先确认 watch是一个对象,一定要当成对象来用。 对象就有,有值。 :就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。 值:可以是函数:就是当你...
  • 在每个代表数据库的redis.h/redisDb结构类型中, 都保存了一个watched_keys字典, 字典的是这个数据库被监视的, 而字典的值则是一个链表, 链表中保存了所有监视这个的客户端。 比如说,以下字典就展示了一...
  • vue watch监听对象

    千次阅读 2018-07-08 09:44:45
    一、watch的API vm.$watch( expOrFn, callback, [options] ) 参数: {string | Function} expOrFn {Function | Object} callback {Object} [options] {boolean} deep {boolean} immediate ...
  • redis的watch命令?

    2020-02-05 18:21:53
    面试了一家上市公司,他们问我redis的watch命令是什么意思,当场就蒙了,redis命令数据类型,get,set这些常见的命令知道,但是watch这个命令一时忘了是什么意思?好尴尬,好吧,就是菜。 正文 watch 用于在进行...
  • redis中的watch命令

    千次阅读 2018-02-13 08:20:07
    watch 用于在进行事务操作的最后一步也就是在执行exec 之前对某个key进行监视 如果这个被监视的key被改动,那么事务就被取消,否则事务正常执行. 一般在MULTI 命令前就用watch命令对某个key进行监控.... // 被监视的
  • redis WATCH命令介绍

    千次阅读 2018-05-26 19:01:18
    fps=1redis WATCH命令介绍2016年03月13日 14:34:07阅读数:2596我们已经知道在一个事务中只有当所有命令都依次执行完后才能得到每个结果的返回值,可是有些情况下需要先获得一条命令的返回值,然后再根据这个值执行...
  • redis事务中的WATCH

    千次阅读 2016-03-10 16:05:00
    假设我们通过WATCH命令在事务执行之前监控了多个Keys,倘若在WATCH之后有任何Key的值发生了变化,EXEC命令执行的事务都将被放弃,同时返回Null multi-bulk应答以通知调用者事务执行失败。例如,我们再次假设Redis中...
  • redis的事务和watch

    2017-11-24 09:00:30
    WATCH命令可以监控一个或多个,一旦其中有一个被修改(或删除),之后的事务就不会执行。监控一直持续到EXEC命令(事务中的命令是在EXEC之后才执行的,所以在MULTI命令后可以修改WATCH监控的键值) 利用watch...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,378
精华内容 10,151
关键字:

watch返回键