未解决的bug----

野性酷女 2023-06-17 07:54 15阅读 0赞

## 镰刀布局 ##

需要看一下bootstrap 12分栏或者 element 24分栏源码

## Video组件 自动播放的兼容问题 controls黑边问题 ##

<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> 
    <video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> 
          <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> 
          <p>Your user agent does not support the HTML5 Video element.</p> 
    </video> 
     
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
    <script> //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 document.getElementById('car_audio').play(); //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('car_audio').play(); document.getElementById('video').play(); }, false); </script>

## 安卓下唤出键盘页面抖动的问题 ##

## css文件过大 ##

**url-loader中的限制过大的话，会将图片一块合并至css文件中**

## 多选联动选择框的性能问题，常量的保存，可能存在的几种情形：全选，全不选，部分选。 ##

## toast的实现原理，element源码结合技术博客 ##

## 修改computed中的数据下的第二层对象，页面不会重绘失败，set失效 ##

## 移动端 安卓呼出导致可视区域改变的问题 ##

fixedKeyboard() { 
                  let that = this;
                  var client_h = document.documentElement.clientHeight;
                  window.addEventListener("resize", function() { 
                    if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) { 
                      //ios这块什么都不用做
                    } else { 
                      //安卓触发window.resize
                      var body_h = document.documentElement.clientHeight;
                      console.log(body_h, client_h);
                      if (client_h > body_h) { 
                        console.log("ad小了");
                          that.addressRef.style.height = client_h +'px'
    
                        // that.keyBord_flag = false
    
                      } else { 
                        // that.keyBord_flag = true
    
                        console.log("ad正常");
                      }
                    }
                  });
                },

## 移动端 手指滑动事件 ##

swiperHandle(){ 
          //禁止到下一页
    
          let that = this
          this.$nextTick(()=>{ 
            var startX, startY, moveEndX, moveEndY, X, Y;
    
            that.mybody.addEventListener('touchstart', function(e) { 
                // e.preventDefault();
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
            }, false);
    
            that.mybody.addEventListener('touchmove', function(e) { 
                // e.preventDefault();
                moveEndX = e.changedTouches[0].pageX;
                moveEndY = e.changedTouches[0].pageY;
                X = moveEndX - startX;
                Y = moveEndY - startY;
                if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { 
                    // alert("向右");
                }
                else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { 
                    // alert("向左");
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { 
                    // alert("向下");
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { 
                    // alert("向上");
                    if(Math.abs(Y) > 60){ 
                      console.log('翻页')
                      console.log('swiper')
                      console.log(that.IsCreate)
    
                      //判断链接是否有效
                      if(!that.IsCreate){ 
                        return
                      }
    
                      that.$refs.mychild.videoPlayHandle();
                      that.swiperClass()    
                      // that.show_choose()
                    }
                    // console.log("向上")
                    console.log(Y)
                }
                else{ 
                    // alert("没滑动");
                }
            });
            //
              }
            )
        },

## 函数的功能尽量单一, 并且利用好形参, 使函数具有复用性 ##