码迷,mamicode.com
首页 > 其他好文 > 详细

在angular中使用swiper插件轮播无效的原因

时间:2017-06-22 01:14:18      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:xbox   通过   获取数据   str   func   onclick   dir   cli   插件   

 

  我在angular中使用swiper插件时总会出现轮播不运行。

 

  做项目么,肯定会使用路由实现切换的效果,我在做项目时总喜欢先把内容渲染在主页面上,当所要实现的效果都实现时,然后再把数据拿出来放在子页面上,通俗的讲就是把他放在另一个页面上,通过路由去获取信息。

  1、在用路由中实现时一定要在路由里加上控制器controller

 

1 app.config(function ($routeProvider) {
2     $routeProvider.when(/index, {
3         templateUrl: libs/index1.html,
4         controller:"test"
5     }).otherwise({
6         redirectTo: /index
7     })
8 }

  2、如果是在json中获取数据,要把轮播js代码写在获取数据中,因为他是先获取数据才执行轮播的,如果你把他放在外部,实行轮播数据获取不到。

var app = angular.module("mk", ["ngRoute"]);
app.controller("test", function ($scope, $http) {
    $http.get(../json/index.json).success(function (data) {
       
    $scope.Y_indexLunbo =  data.Y_indexBox.Y_indexLunbo;

        //轮播js
        var mySwiper = new Swiper(.Y_Img,{
            loop: true,
            observer:true,
            autoplay:4000,
            paginationClickable :true,
            autoplayDisableOnInteraction : false,
            prevButton:".swiper-button-prev",
            nextButton:".swiper-button-next"
        });
    })
});    

 3、还有就是在轮播里observer:true也是必不可少的。
 你们在用swiper插件时最好给图片或图片的父级给 予宽高,这样会避免一些不必要的错误。

在angular中使用swiper插件轮播无效的原因

标签:xbox   通过   获取数据   str   func   onclick   dir   cli   插件   

原文地址:http://www.cnblogs.com/yhyanjin/p/7062331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!