AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。

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

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

<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ng-repeat="result in mediaList">
//此处为一个滑动页内容
</div>
<!-- ============== -->
</div>
</div>

在测试时发现，手动复制n个循环部分，则可以滑动n个块；手动调节窗口大小，使页面文档发生改变（动态响应）后，可以正常滑动。

于是猜测swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。 而在angular始终在swiper初始化之后定义，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。

找到原因后，只须对症下药。 在查阅Swiper的API时发现，有这样两个参数：observer和observeParents，前者启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。后者原理和前者一样，只是将observe应用于Swiper的父元素。两者默认值都为false。 所以在原来的swiper初始化代码中加上这两行即可。

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

以上所述是小编给大家介绍的AngularJS 中使用Swiper制作滚动图不能滑动的解决方法，希望对大家有所帮助，如果大家有

任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件路径 <link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" rel="external nofollow" /> <scri

  • JS中Swiper的使用和轮播图效果

    Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs

  • JS中利用swiper实现3d翻转幻灯片实例代码

    JS中利用swiper实现3d翻转幻灯片实例代码

    前言 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 本文详细的给大家介绍了关于JS用swiper实现3d翻转幻灯片的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先上效果图 使用的是swiper3.0版本coverflow效果,源码如下 <!DOCTYPE html> <

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • 非常优秀的JS图片轮播插件Swiper的用法

    最近在一个微信公众号中用到了swiper图片轮播插件.接下来为大家介绍插件的用法 首先需要下载Swiper 1:加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body

  • 移动端触屏幻灯片图片切换插件idangerous swiper.js

    移动端触屏幻灯片图片切换插件idangerous swiper.js

    强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如: speed:切换的速度(毫秒) autoplay:自动播放的速度 mode:切换模式 horizontal(横向) vertical(竖向) loop:是否循环播放true false 如此强大的配置功能,值得使用. 使用方法: 1.加载插件 <link rel="stylesh

  • AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &

  • vue中使用echarts制作圆环图的实例代码

    vue使用echarts制作圆环图,代码如下所示: <div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionD

  • vue中使用swiper轮播图的正确姿势(亲测有效)

    vue中使用swiper轮播图的正确姿势(亲测有效)

    目录 前言 1.新建vue项目 2.装swiper的包 3.使用swiper 总结 前言 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的,吐槽完毕.假设你是个新手,我从新建项目开始跟你讲,以下是步骤. 1.新建vue项目 vue create 项目名 然后选最下面那一个(键盘上下键操作)然后回车 选择Bable,Router,Vuex,Css-Processords四个,其他的不要选中(空格键是选中和取消选中) 剩下的步骤按这张图来进行选择,然后项目就创建

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

  • 在vue中实现禁止屏幕滚动,禁止屏幕滑动

    今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果: 其中背景是透明色的,但是弹出这个组件时手指滑动.鼠标滚轮滑动,底部页面是会动. 作为自己开发的一个常用的组件,这种bug当然是要解决的. 于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法.终于找到了一个最简单.最实在的方法, 代码如下: <div class="magnify" v-show="isShow" @click.self="hide" @

  • OpenCV中C++函数imread读取图片的问题及解决方法

    OpenCV中C++函数imread读取图片的问题及解决方法

    今天在用OpenCV实验Image Pyramid的时候发现一个奇怪的问题,就是利用C++函数imread读取图片的时候返回的结果总是空,而利用C函数cvLoadImage时却能读取到图像.代码如下: //环境:VS2010 + OpenCV 2.3.1 #include "stdafx.h" #include <cv.h> #include <highgui.h> #include <math.h> #include <stdlib.h>

  • 基于Linux系统中python matplotlib画图的中文显示问题的解决方法

    最近想学习一些python数据分析的内容,就弄了个爬虫爬取了一些数据,并打算用Anaconda一套的工具(pandas, numpy, scipy, matplotlib, jupyter)等进行一些初步的数据挖掘和分析. 在使用matplotlib画图时,横坐标为中文,但是画出的条形图横坐标总是显示"框框",就去查资料解决.感觉这应该是个比较常见的问题,网上的中文资料也确实很多,但是没有任何一个彻底解决了我遇到的问题.零零碎碎用了快3个小时的时间,才终于搞定.特此分享,希望能帮到有同

  • 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱.如下面图片所示: 刚开始打开时页面布局正确: 此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图: 但是首页选项卡的页面是正常的. 为了便于解释说明,这里用第一个选项卡代表 "首页",第二个选项卡代表"子菜单10" 出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

随机推荐