zoukankan      html  css  js  c++  java
  • Angular中使用Swiper不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎。

    今天在使用Swiper的时候遇到这个问题:

    使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成n个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用。

    <div class="swiper-wrapper" >
        <div class="swiper-slide" ng-repeat="result in mediaList">
            <img src="{{result.navImage}}">
        </div> 
    </div>

    代码执行时候发现,手动复制n个循环部分,则可以滑动n个块;手动调节窗口大小,使页面大小发生改变后,可以正常滑动。

    初始化的时候自动检测swiper-wrapper下有多少个swiper-slide,则允许滑动多少个img。 而在angular始终在swiper初始化之后定义,swiper则无法判断有多少个slide,所以划不动。

    参考资料之后发现swiper有这样两个参数:observerobserveParents

    observer,当改变swiper的样式(隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。

    observeParents,只是将observe应用于Swiper的父元素。两者默认值都为false。

    所以在原来的swiper初始化代码中加上这两行就可以了。

    var mySwiper = new Swiper('.swiper-container',{
        autoplay:2500,
        loop:true,
        autoplayDisableOnInteraction:false,
        pagination : '.swiper-pagination',
        paginationClickable: true,
        longSwipesRatio: 0.3,
        touchRatio:1,
        observer:true,//修改swiper自己或子元素时,自动初始化swiper
        observeParents:true,//修改swiper的父元素时,自动初始化swiper
    })

    这样的话,angular 实现swiper 就很简单了。

    希望可以帮到小伙伴们。

  • 相关阅读:
    机器学习(ML)二之损失函数
    机器学习包pip清华镜像源安装方法
    机器学习(ML)一之 Linear Regression
    linux安装glibc-2.14后字符集出问题
    HBase单机环境搭建
    MySQL基础笔记(六) 存储过程与函数
    MySQL基础笔记(五) 视图
    MySQL基础笔记(四) 索引
    MySQL基础笔记(三) 复杂查询
    MySQL基础笔记(二) 完整性约束
  • 原文地址:https://www.cnblogs.com/u-lhy/p/6973448.html
Copyright © 2011-2022 走看看