账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue.js编写移动端页面，检测旋转屏幕，横竖屏。
    • 2018-02-10 00:00
    • 10
    97
    0

    初学vue，想要在检测到旋转屏幕后显示遮罩层。
    现在我的想法是在mounted时期添加监听屏幕旋转事件，如果检测到了，则修改data中的值isShowCover来改变v-show中的真假值，来达到显示隐藏遮罩层的目的。
    但是mounted时期好像取不到data中的值。我是用alert来判断取不取的到值的.

    this.isShowCover 是undefined
    this.showCover() alert都不提示了。
    this.$options.methods.showCover() alert也不提示了。

    所以想问的是想要监听到旋转屏幕事件，这个事件应该加在哪里？检测到旋转屏幕事件后，怎么才能把isShowCover的值改变来显示隐藏遮罩层？data中的值大概是什么时候可以取到并且修改？

    提前感谢下回答的大佬。

    下面附主要代码。

    <template>
<div v-show="isShowCover" style = "position:fixed;background:transparent;background:rgba(0,0,0,0.5);margin:auto;top:0;bottom:0;left:0;right:0">
          <img src="../../pic/rotatePic.png" style="width:200px;height:200px;margin:auto;top:0;bottom:0;left:0;right:0">
</div>
</template>
    <script>
export default {
    data: () => ({
      isShowCover: false
    }),
    mounted() {
    window.addEventListener(
      "onorientationchange" in window ? "orientationchange" : "resize",
      function() {
        if (window.orientation === 90 || window.orientation === -90) {
            //想把下面的alert换成能够控制v-show的代码
            
          alert(
            this.$options.methods.showCover() +
              "横屏可能导致页面异常，建议竖屏操作！"
          );
          //alert("123");仅alert纯文本可以正常运行
        }
        //window.location.reload();
      },
      false
      );
    },
    methods:{
        showCover() {
          return "123";
        },
    }
</script>
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 换我堕落ミ 普通会员 1楼

      在Vue.js中，我们可以使用@media媒体查询来检测屏幕的旋转，以及屏幕是否横竖屏。以下是一个简单的例子，展示了如何在移动设备上检测旋转和横竖屏：

      1. 首先，我们需要在你的项目中引入vue和vue-style-loader，并创建一个名为App.vue的文件：

      ```html

      ```

      1. 在App.vue文件中，我们定义了一个isMobile数据属性来表示屏幕是否是移动设备，以及isPortrait和isOrientation变量来分别存储屏幕的旋转模式和横竖屏状态。我们还定义了rotateScreen、rotateScreenToTop、rotateScreenToBottom、rotateScreenToLeft和rotateScreenToRight方法来分别执行不同的旋转和缩放操作。

      2. 在methods部分，我们定义了isPortrait和isOrientation方法来获取屏幕的旋转模式和横竖屏状态。然后，我们根据屏幕的旋转模式和横竖屏状态来调用相应的旋转操作方法。

      3. 在rotateScreen方法中，我们首先检查屏幕是否是移动设备，然后根据屏幕的旋转模式（'portrait'或'landscape'）调用相应的旋转操作方法。例如，如果是横屏，我们调用rotateScreenToTop或rotateScreenToBottom方法来将屏幕旋转到顶部或底部；如果是竖屏，我们调用rotateScreenToLeft或rotateScreenToRight方法来将屏幕旋转到左或右。

      4. 在rotateScreenToTop和rotateScreenToBottom方法中，我们分别调用transform: translateY(-50%)和transform: translateY(50%)来将屏幕垂直或水平居中，并将transform: rotate(90deg)来旋转屏幕。

      5. 在rotateScreenToLeft和rotateScreenToRight方法中，我们分别调用transform: translateX(-50%)和transform: translateX(50%)来将屏幕水平或垂直居中，并将transform: rotate(90deg)来旋转屏幕。

      6. 最后，我们通过this.$router.push({ path: 'rotate-screen' })或this.$router.push({ path: 'rotate-screen-to-top' })或this.$router.push({ path: 'rotate-screen-to-bottom' })或this.$router.push({ path: 'rotate-screen-to-left' })或this.$router.push({ path: 'rotate-screen-to-right' })来将页面跳转到相应旋转或缩放操作的方法页面。

      注意，这只是一个基础的示例，实际的屏幕旋转和缩放操作可能需要更复杂的逻辑，例如检测屏幕尺寸、旋转角度、手势识别等。此外，@media媒体查询只能应用于移动设备，如果你需要在桌面或桌面浏览器中检测屏幕旋转和缩放，可能需要使用screen-dimensions或screen-resolution等属性，或者使用更复杂的CSS选择器来检测屏幕的属性。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部