美文网首页程序员让前端飞
移动端轮播图不能充满外框,缺1px的问题

移动端轮播图不能充满外框,缺1px的问题

作者: 故林青衫 | 来源:发表于2017-12-28 18:09 被阅读0次
    代码如下:
      <div class="index_slider">
              <div class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                   <div class="mui-slider-item mui-slider-item-duplicate"><a @click="lastImgClick"><img :src="lastImg" /></a></div>
                   <div class="mui-slider-item" v-for='item in items'><a @click="bannerUrl(item)"><img :src="item.img" /></a></div>
                   <div class="mui-slider-item mui-slider-item-duplicate"><a @click="firstImgClick"><img :src="firstImg" /></a></div>
                </div>
              </div>
          </div>
    

    问题解析:
          在浏览器dom渲染中,对于div等dom元素的渲染,会对非整数宽度的dom自动渲染为整数宽度,比如说100.5px的宽度,将被渲染为101px,小数点后数值进1;但是类似于img标签等内部标签,在渲染中会对小数点后数值直接舍弃,例如,100.5px直接变为100px,因此,可以看到dom在移动端浏览器展示的结果总是图片距离外框边缘具有1px的距离。

    解决办法:
          在js中动态渲染轮播图片外框".mui-slider-item"的高度添加1px; 通过原生的方法获取到下标0的".mui-slider-item"的宽度,这个宽度通过赋值给一个全局变量,在把变量循环赋值到每一个".mui-slider-item"。

    代码如下: 
     var imgBox = document.getElementsByClassName('mui-slider-item');
                var heigthBox = imgBox[0].offsetWidth;
                console.log(heigthBox);
                for(var i=0;i<imgBox.length;i++){
                    imgBox[i].style.width = heigthBox + 'px';
                }
    

    解决原理:
    在js取值中,对于非整数的宽度,取到的是进过小数点的整数,因此,这里取值之后的数值就是100.5进1之后的数值101,将他直接赋值到dom,即可解决,但是框架轮播图原本的图片移动距离未曾变化,还是原来的变化值,只是在最后一张图片到位后直接变回了第一张,会出现一个短距离的快速切换,轮播动画略有卡顿。
    解决虽不完美,但应急尚可,留待以后找到更好的解决思路。

    相关文章

      网友评论

        本文标题:移动端轮播图不能充满外框,缺1px的问题

        本文链接:https://www.haomeiwen.com/subject/xkbvgxtx.html