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


      我在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插件时最好给图片或图片的父级给 予宽高,这样会避免一些不必要的错误。

  • 相关阅读:
    Linux每天一个命令:cat
    python3 str或bytes转换函数
    python3获取指定目录内容的详细信息
    python3 简单进度条代码
    CNN review
    Hive -- 原理篇
    leetcode 4. 寻找两个正序数组的中位数 (二分)
    leetcode 680 验证回文字符串II (贪心)
    leetcode 面试题03 数组中重复的数字
    机器学习--SVM篇
  • 原文地址:https://www.cnblogs.com/yhyanjin/p/7062331.html
Copyright © 2020-2023  润新知