javascript - ioinc轮播图ion-slide-box问题

问题描述

问 题

用ionic里面的ion-slide-box做出来的切换页面效果，如何使每个ion-slide的高度自适应，而不是每个ion-slide都默认保持一致？

解决方案

这个问题 放了 三天多了，没人回答，我找到了答案，只好自问自答了。不多说，直接上代码

$scope.slideChanged=function(index){
            $scope.slideIndex=index;
            // 获取滑到某个页面的ion-slide的dom元素
            var Dom= document.querySelectorAll(".slider-slide")[index];
            //获取dom元素内容高度
            var DomHeight = Dom.getBoundingClientRect().bottom - Dom.getBoundingClientRect().top;
            console.log(DomHeight);
            //通过ng-style将样式绑定到ino-slide-box上
            $scope.newHei={
                "height":DomHeight+"px"
            }
        };

值得一提的是，如果就这样直接使用的话，滑动一次，给ion-slide-box一次高度以后，将会使box里面的dom的高度全部更改为给的这个高度，再次滑动以后，并不能达成我们所要的效果，所以，我们得找到里面ino-slide的样式是哪里出了问题，并将其更改。找到后，发现，原来这个slider-slide的class给ion-slide的height是100%，所以我们通过css重新改变其样式：

.slider-slide{
height:auto;
}

然后就大功告成了。但是这样的方法会影响性能哦，慎用。。。。。。。。

这篇关于javascript - ioinc轮播图ion-slide-box问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！