每天一个知识点: 判断浏览器类型

自由自在DIV2024-03-20 14:45

最近开发了一个h5,比如微信扫码二维码，就跳转到这个h5上面，对应的支付也会调用微信支付；如果是支付宝扫描二维码，也是跳转到这个h5上面，对应的支付就会调用支付宝支付。技术用的Vue3 + Vant4。

如何判断该浏览器是微信还是支付宝

javascript 复制代码

const getNavigatorType = () => {
  let ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //判断微信
    return 'WECHAT';
  } else if (ua.match(/AlipayClient/i) == "alipayclient") {
    //支付宝
    return 'ALIPAY';	  
  } else {	 
    return 'other';
  }
}

根据浏览器的类型，调用支付接口，传对应的类型参数，和账单金额就可以了。

如何实现顶部底部固定，中间订单内容滑动

项目就两个页面，其中一个是待支付订单列表。待支付订单列表用的弹出层来做，这里如果订单项目太多，会出现滚动条，滚动条滑动的的时候，想要的效果是整个弹出成充满页面，向下滑动的时候顶部的标题和底部的支付栏不动，只有中间的订单会滑动。

xml 复制代码

<van-popup :show="true" position="right" style="width: 100%; height:100%; overflow: hidden;" >
    <van-nav-bar 
        title="待支付订单" 
        fixed 
        left-arrow 
        @click-left="$emit('closepopup')">
    </van-nav-bar>
    <div class="container" style="margin-top: 46px;">
        <div class="content">
            <OrderCard :orderList="orderList"> </OrderCard>
        </div>
    </div>
   
    <van-submit-bar
      button-color="#169bd5"
      :price="totalAmount"
      button-text="立即支付"
      tip-icon="info-o"
      @submit="$emit('onSubmit', totalAmount)"
    >
    </van-submit-bar>
</van-popup>

<style scoped lang="less">
 .container {
  overflow: hidden;
  position: relative;
  padding: 8px 12px 0;
  height: 100vh;
  padding-bottom: 100px;
  background-color: rgb(242, 242, 242);
  .content {
    height: calc(100vh - 52px);
    overflow-y: scroll;
    padding-bottom: 50px;
  }
 }
</style>

弹出层加一个overfolow:hidden;用一个容器container把内容包裹住，container设置overflow:hidden; position: relative; 订单内容部分content,设置overflow-y:scroll。