quasar v2.x在微信xweb内核出现Layout的 min-height计算错误的问题

Posted 2023-04-19 zjhgx

在微信中搜索hjdang, 如果数量很少，会出现一段空白，原因是原先有数据时Layout的高度已经被拉长了，但搜索后数据变小，但Layout的min-height计算时不知道出了什么问题，没有变化，所以出现了空白的区域。我记得以前这个问题是没有的，有可能是微信升级后内置浏览器内核改变的原因。经测试，Mac上的chrome，Mac上的微信开发工具，Android上的chrome上，内置浏览器上，iOS上的微信上都不会出现这个问题。唯一出问题的是Android的微信，QQ，那只能猜测是因为微信，QQ浏览器的内核问题了。

要修改这个问题，只要在Layout上自定义一个 ，然后在q-page上加一个:style-fn="myTweak" 方法修改默认的高度计算

  <q-layout view="hHh lpR fFf" class="bg-primary" style="min-height: 100vh">

  <q-page class="bg-primary" :style-fn="myTweak">

    myTweak(offset) 
      // "offset" is a Number (pixels) that refers to the total
      // height of header + footer that occupies on screen,
      // based on the QLayout "view" prop configuration

      // this is actually what the default style-fn does in Quasar
      return  minHeight: offset ? `calc(100vh - $offsetpx)` : \'100vh\' ;
    ,

其实计算q-page的min-height这个myTweak是默认的计算方法，如果只加了q-layout的style格式还是乱的，必须把q-page的也改了。我猜测是计算的时机哪里出了问题，导致计算是依据变化前的窗体高度来计算的。

喜欢艺术的码农

在微信端使用video标签，播放结束会出现QQ浏览器推荐视频的解决办法（vue）

会出现播放结束显示QQ浏览器推荐视频的原因：（我是vue的项目，而且我是新手，只是单纯的给大家分享一个方法，代码比较low请自动忽略）

　　因为在x5（QQ浏览器）内核中，把video标签劫持了，只要是检测到使用了video标签的话（包括使用了基于h5的video写的插件），就会出现这种情况。

 

解决办法：

　　html部分：（需要的是一个id选择器，其他的请忽略，src中的内容是调接口返回）

　　　　<video autoplay id="end" controls :src="chapter.url" poster="http://eres.xgstars.com/promote/ed.png"></video>

　　js部分：

　　　　showOtherVideo(){

　　　　　　let _this = this;

　　　　　　setTimeout(function(){

　　　　　　　　var dom = document.getElementById(‘end‘);

　　　　　　　　var flag = dom.paused;

　　　　　　　　if(!flag){

　　　　　　　　　　_this.showOtherVideo();

　　　　　　　　}else{

　　　　　　　　　　// _this.showOtherVideo();

　　　　　　　　　　if(dom.currentTime == dom.duration && dom.currentTime!=0){ 

　　　　　　　　　　　　//这里的判断是如果视频的总时间等于视频已经播放的时间，并且视频的播放时间不为零时

　　　　　　　　　　　　//这个地方的就是写视频结束的时候的代码的地方

　　　　　　　　　　}else{

　　　　　　　　　　　　_this.showOtherVideo();

　　　　　　　　　　}

　　　　　　　　}

　　　　　　},1000)

　　　　},

 

　　这个的原理就是通过一个计时器每隔一秒刷新一次，来监听视频是不是播放完毕，如果没有播放完毕则继续监听，如果播放完毕就执行下面的方法，可以调用你自己公司的接口来请求下一段视频，替换当前视频，他会有一秒的闪烁，然后就会跳走，如果先看看效果的话，就去微信浏览器里面看看优酷，他们就是这种效果，但是方法应该不会这么low。