zoukankan      html  css  js  c++  java
  • rem适配echarts/swiper

    1、rem适配时swiper横向滚动swiper-slide会自动定高度,导致css样式高100%无效

    解决:

    将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。

    启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
    默认false,不开启,可以使用update()方法更新。

    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        loop: true,
        autoplay: 3000,
        observer:true,  //
        observeParents:true,   //
        pagination: {
            el: '.swiper-pagination',
            clickable: false,
        },
    });

    2、echarts无法使用rem为单位

    解决:页面header引入 echarts,外框正常大小,echarts可设置宽100%,高100%,而不是宽350px,高210px【ip4宽度320,导致echarts超出屏幕之外】

    <script type="text/javascript">
            var d = document.documentElement;
            var cw = d.clientWidth || 750;
            document.documentElement.style.fontSize = (cw / 750 * 100) + 'px';
        </script>
  • 相关阅读:
    noexcept(c++11)
    右值引用和std::move函数(c++11)
    mint-ui 取值
    apicloud 注意事项
    倒计时
    获取第n天日期
    防止split没有切割的变量报错
    return
    时间戳转为日期
    echarts 中 请求后台改变数据
  • 原文地址:https://www.cnblogs.com/cdj61/p/14348416.html
Copyright © 2011-2022 走看看