Framework7解决浏览器返回问题

现在使用Vue、React框架开发前端应用的人越来越多,配套的周边插件、UI库也应育而生,使用它们很容易就开发出非常漂亮且实用的前端应用和网站。

单页面应用的好处很多,一次加载,全程流畅,还有切换动画,体验良好,但在浏览器或者手机端的Webview上,用户想要返回就会直觉的按下返回键,这对单页面应用简直是灾难,本身就一个浏览器页面壳,物理返回的结果是直接退出我们的网站。

但你不能教育你的用户不要这么返回,应该点页面上的返回功能,所以只能自己想办法解决。

以 Framework7 为例,配置好 pushState 就可以让用户像访问多页面网站操作返回我们的单页面应用。

在 f7param 中设置 view 的参数,以前的版本是直接修改 new Framework7({ pushState: true})

export default {
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          name: 'uni', // App name
          theme: 'ios', // Automatic theme detection
          // App root data
          data: function () {
            return {
              user: {
                firstName: 'John',
                lastName: 'Doe',
              },

            };
          },
          view: {
            pushState: true,
            pushStateSeparator: '#!',
            pushStateAnimate: true,
            // pushStateRoot: '/',
          },

          // App routes
          routes: routes,
        },

        // Login screen data
        username: '',
        password: '',
      }
    },
    methods: {
      alertLoginData() {
        this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password);
      }
    },
    mounted() {
      this.$f7ready((f7) => {

        // Call F7 APIs here
      });
    }
  }

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值