ionic中ion-slide-box 使用 ng-repeat 有的时候页面不渲染的问题

最新推荐文章于 2021-08-06 12:24:16 发布

reactL

最新推荐文章于 2021-08-06 12:24:16 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/reactL/article/details/80594420

本文介绍如何使用Ionic框架中的幻灯片组件实现图片轮播功能。通过两种方法展示如何加载图片数据并更新幻灯片，包括使用$http获取数据及初始化幻灯片组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：

.controller("XXXXCtrl", ["$scope", "$ionicSlideBoxDelegate", "$http",
    function ($scope, $ionicSlideBoxDelegate, $http) {
		$http.get(url).success(function(data) {
			$scope.slides =data.XXXXX;
		});
        $scope.updateSlider = function () {
            $ionicSlideBoxDelegate.update(); 
        }
});

<ion-slide-box ng-init="updateSlider()" on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000>
    <ion-slide ng-repeat="item in XXXX">
        <div>
            <img src={{item.XXXX}}>
	</div>
    </ion-slide>
</ion-slide-box>

方法2：

.controller("XXXXCtrl", ["$scope", "$ionicSlideBoxDelegate", "$http",
    function ($scope, $ionicSlideBoxDelegate, $http) {
		$http.get(url).success(function(data) {
			$scope.slides =data.XXXXX;
		});
});

<ion-slide-box ng-if="XXXX != null" on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000>
    <ion-slide ng-repeat="item in XXXX">
        <div>
            <img src={{item.XXXX}}>
	</div>
    </ion-slide>
</ion-slide-box>