您好,匿名用户

ioinc轮播图ion-slide-box问题

0 投票

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

用户头像 提问 2017年 6月17日 @ Maokai 中士 (1,127 威望)
分享到:

1个回答

0 投票

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

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

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

用户头像 回复 2017年 6月17日 @ Cancer 下士 (906 威望)
提一个问题:

相关问题

0 投票
1 回复 15 阅读
0 投票
1 回复 26 阅读
用户头像 提问 2017年 3月16日 @ Shaco 下士 (919 威望)
0 投票
1 回复 208 阅读
0 投票
0 回复 9 阅读
用户头像 提问 2017年 6月11日 @ hadoop 下士 (944 威望)
0 投票
1 回复 69 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...