search

libin1991 / libin_Blog

爬虫-博客大全
https://libin.netlify.com/
124 stars 17 forks source link

Vue关于这一次h5踩到的坑 #667

Open libin1991 opened 6 years ago

libin1991 commented 6 years ago

场景1：返回弹窗

需求：页面返回的时候弹窗确认是否返回，确认返回，取消留在当前页面

// 点击返回的时候，路由拦截，并将单前页面的路由保留下来
  beforeRouteLeave(to, from, next) {
    let self = this;
    if (to.name === "SeckillDetail" && self.countDown != "00:00:00") {
      this.selfNext = next //将next保留下来
      self.skipParams = {
        name: "SeckillDetail",
        query: to.query,
        fullPath: to.fullPath
      };
      self.currentParams = {
        name: from.name,
        query: from.query
      };
      self.dialogVisableBack = true;
    } else {
      next();
    }
  },

//点击弹窗的确认按钮
    backSkip() {
      let _this = this;
      this.dialogVisableBack = false;
      this.showToast("订单锁定时长五分钟，可前往我的秒杀支付订单或取消订单");
      setTimeout(()=>{
        this.dialogVisableBack = false;
        (this.selfNext)() //通过next跳转，通过push和location.href跳转无效
      },2000)
    },
//点击弹窗的取消按钮，将拦截路由时保留的
    cancelBack() {
      this.dialogVisableBack = false;
        location.href =
          "main#/comfirm-order?orderId=" +
          this.currentParams.query.orderId +
          "&itemId=" +
          this.currentParams.query.itemId +
          "&projectId=" +
          this.currentParams.query.projectId +
          "&seckillId=" +
          this.currentParams.query.seckillId;
    },
复制代码

场景2：1px的border

ios其实可以用0.5px，but安卓不支持，so只能忍痛割爱

& .line {
  width: 236px;
  float: right;
  height: 1px;
  margin: 11px 0px;
  position: relative;
  border: none;
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    background: #ccc;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
    }
复制代码

场景3：vue项目加入百度统计

router.afterEach( ( to, from, next ) => {
    setTimeout(()=>{
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "这里是你的地址";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    },0);
}); 
复制代码

场景4：app端h5的title只能识别一次的问题

// main.js

import { setMetaTitle } from './js/utils.js'

Vue.directive('title', {
    inserted: function (el, binding) {
     setMetaTitle(binding.value)
    }
 })
复制代码
// utils.js
export function setMetaTitle(title) {
  document.title = title
  let mobile = navigator.userAgent.toLowerCase()
  if (/iphone|ipad|ipod/.test(mobile)) {
   let iframe = document.createElement('iframe')
   iframe.style.display = 'none'
   // 替换成站标favicon路径或者任意存在的较小的图片即可
   iframe.setAttribute('src', 'static/img/blank.png')
   let iframeCallback = function () {
    setTimeout(function () {
     iframe.removeEventListener('load', iframeCallback)
     document.body.removeChild(iframe)
    }, 0)
   }
   iframe.addEventListener('load', iframeCallback)
   document.body.appendChild(iframe)
  }
 }
复制代码
// 需要设置title的页面中
<h2 v-title="'确认订单'"></h2>
复制代码

场景5：微信端定时器息屏暂停的问题（微信亲测有效，app端无解T.T）

// 带有定时器的页面
  mounted() {
    this.getData();//页面数据请求方法
    document.addEventListener("visibilitychange", _self.checkViChangeTotal);
  },
  method:{
    checkViChangeTotal() {
      if (!document.hidden) {
      // 利用h5中hidden这个属性，如果页面由息屏打开，重新请求
        this.getData();
      }
    },
  }
复制代码

场景6：vue路由频繁切换的时候，会有部分白屏问题，下拉后恢复正常

mounted() {
   this.setPosition(); 
},
method:{
  setPosition() {
      var oTop = $(".page-center").offset().top;
        //获取导航栏的高度，此高度用于保证内容的平滑过渡
        var martop = $('.page-center').outerHeight();
        var sTop = 0;
        // 监听页面的滚动
        $(window).scroll(function () {
            // 获取页面向上滚动的距离
            sTop = $(this).scrollTop();
            // 当导航栏到达屏幕顶端
            if (sTop >= oTop) {
                // 修改导航栏position属性，使之固定在屏幕顶端
                $(".page-center").css({ "position": "fixed", "top": "0" });
                // 修改内容的margin-top值，保证平滑过渡
                $(".page-bottom").css({ "margin-top": martop });
            } else {
                // 当导航栏脱离屏幕顶端时，回复原来的属性
                $(".page-center").css({ "position": "static" });
                $(".page-bottom").css({ "margin-top": "0" });
            }
        });
    },  
}

复制代码

场景7：iphoenX适配问题

// dom部分
<div class="adapt"></div>
复制代码
// css部分，利用media做你想要的适配，我这里通过一个白色div留出安全距离防挡
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .adapt {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;
  }
}
复制代码

场景8：通过一个属性改变select下拉角标的样式

//dom部分
    <div class="item" style="padding:0px;">
        <span class="card_info">
            <select  id="cardType"  v-model="orderData.card_type" :disabled="!orderData.is_update">
                <option value="">请选择证件类型</option>
                <option value="大陆身份证">大陆身份证</option>
                <option value="军官证">军官证</option>
                <option value="护照">护照</option>
                <option value="港澳台身份证">港澳台身份证</option>
            </select>
            <i class="tran" v-if="orderData.is_update"><img src="../assets/arrow.png"/></i>
        </span>
        <input placeholder="请输入证件号" id="cardNum" v-model="orderData.card_num" 
        :readonly="!orderData.is_update" 
        style="padding:18px 0px;min-width:170px">
    </div>
复制代码
//核心css
      .tran {
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        pointer-events: none;//点击穿透
        margin-left: -22px;//让下标能覆盖到select上面
        position: relative;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
复制代码

libin1991 commented 6 years ago

https://juejin.im/post/5be92ae2e51d4572fd18c4c6