代码如下:
<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,即可解决,但是框架轮播图原本的图片移动距离未曾变化,还是原来的变化值,只是在最后一张图片到位后直接变回了第一张,会出现一个短距离的快速切换,轮播动画略有卡顿。
解决虽不完美,但应急尚可,留待以后找到更好的解决思路。
网友评论