ioinc轮播图ion-slide-box问题

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

阅读 2.6k
1 个回答

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

$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;
}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题