解决swiper-slide在ion-slide-box不滑动的问题(暂且这么描述)

1,开发环境ionic1+angularjs1 嗯对的版本都是最低版本

页面结构想要完成的功能是这样的(比较丑 ,不接受批评,捂脸)

 

大致如图 

代码结构:

 

<ion-slide-box><ion-slide>
//列表
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
111
</div>
<div class="swiper-slide">
222
</div>
<div class="swiper-slide">
333
</div>
<div class="swiper-slide">
444
</div>
</div>
</div>
//tab1控制显示的页面内容
<div>tab1显示的内容</div>  
</ion-slide>
//tab2控制显示页面内容
<div>tab2显示的内容</div> 
<ion-slide></ion-slide>
</ion-slide-box>

最后的效果。可以看到tab可以实现内容的切换。但是列表似乎并没有执行滑动效果。

原因,由于数据还未填充到页面,页面渲染也还未完成,但此时swiper绑定到dom元素上的方法已经先行执行完了,所以在肉眼上造成,页面已经渲染完,但是滑动效果并未执行的感觉,从而表现为滑动无效

解决方法:在页面渲染完成后添加监听事件

  1. $scope.$watch('$viewContentLoaded',function(event){
  2. var mySwiper = new Swiper('.swiper-container', {
    // pagination : '.swiper-pagination',//分页
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true,//修改swiper的父元素时,自动初始化swiper
    slidesPerView: 4.5,//每页显示数量
    // freeMode:true,//是否开启随意滑动
    })
  3. });
    亲测可行。

 

转载于:https://www.cnblogs.com/wyycatch/p/9483004.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java趣味题-打印99乘法表

java趣味题-打印99乘法表 public class First102 { public static void main(String[] args) { for(int i1;i<9;i){ for(int j1;j<i;j){ System.out.print(i"*"j""i*j" "); } System.out.println(""); } } }posted…

MOXy的@XmlVariableNode – JSON模式示例

我们正在向EclipseLink MOXy添加从域模型生成JSON模式的 功能 。 为此&#xff0c;我们创建了一个新的变量节点映射。 在本文中&#xff0c;我将通过将Java模型映射到JSON模式来演示新的映射。 您可以使用每晚构建的EclipseLink 2.6.0进行尝试&#xff1a; http://www.eclips…

在HTML5中如何利用Canvas处理并存储图片

HTML5中增加的Canvas元素&#xff0c;配合JS灵活的语法&#xff0c;处理起图片变得异常简单&#xff0c;不需要在客户端用C/C 写一大堆代码&#xff0c;对于熟悉JS的程序员来说&#xff0c;只需要考虑处理图片的逻辑了。 canvas中如果想要处理图片就需要借助ImageData这个对象&…

python正则表达式research_八Python正则表达式

正则表达式是搜索、替换和解析复杂字符串的一种强大而标准的方法&#xff0c;Python中的正则相关的东西全在re模块下。1 常用的匹配^匹配字符串的开始$匹配字符串的结尾\b匹配一个单词的边界\d匹配任意数字\D匹配任意非数字字符x?匹配一个可选的x(匹配1次或0次x字符)x*匹配0次…

Win10 系统直接在目录下打开cmd

每次用cmd命令&#xff0c;就要定位到当前文件夹&#xff0c;很麻烦&#xff0c;于是想了下&#xff0c;可不可以直接定位到要操作的文件夹&#xff0c;百度了一下&#xff0c;果然&#xff0c;度娘没有让我失望&#xff0c; 美滋滋的试了下。真的可以。在此记录下&#xff0c;…

使用Apache Lucene 4.3轻松进行搜索

Lucene是用Java编写的全文搜索引擎&#xff0c;可以为任何应用程序提供强大的搜索功能。 Lucene的核心是基于文件的全文本索引。 Lucene提供API创建该索引&#xff0c;然后向该索引添加和删除内容。 此外&#xff0c;它允许使用功能强大的搜索算法从该索引中搜索和检索信息。 可…

Html5中新增的表单元素详解

HTML5 的新的表单元素&#xff1a; HTML5 拥有若干涉及表单的元素和属性。•datalist•keygen•outputdatalist 元素datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域&#xff0c;请用输入域的 list 属性引用 da…

今日学到乱写

EXPLAIN 直接上图 一个个说&#xff1a; select_type 查询中每个select子句的类型&#xff08;简单OR复杂&#xff09; a. SIMPLE&#xff1a;查询中不包含子查询或者UNION b. 查询中若包含任何复杂的子部分&#xff0c;最外层查询则被标记为&#xff1a;PRIMARY c. 在SELECT或…

JavaScript日期格式化处理

1 /**2 * 获取年月&#xff0c;如&#xff1a;2018-083 */4 export function getMonth () {5 return formatDate(new Date(), yyyy-MM)6 }7 8 /**9 * 10 * param {*} date 11 * param {*} fmt : yyyy-MM、yyyy-MM-dd、yyyy-MM-dd hh:mm、yyyy-MM-dd hh:mm:ss 12 */ 13 …

在JBoss AS 7上部署BroadleafCommerce 2.0

前2个步骤与Broadleaf的具体联系并不紧密&#xff0c;但提到该步骤使执行&#xff08;复制/粘贴&#xff09;这些步骤变得容易。 步骤&#xff03;1&#xff1a;在JBoss AS中配置数据源。 <datasource jta"true" jndi-name"java:jboss/datasources/Broadlea…

hash的算法 java_【数据结构与算法】一致性Hash算法及Java实践

追求极致才能突破极限一、案例背景1.1 系统简介首先看一下系统架构&#xff0c;方便解释&#xff1a;页面给用户展示的功能就是&#xff0c;可以查看任何一台机器的某些属性(以下简称系统信息)。消息流程是&#xff0c;页面发起请求查看指定机器的系统信息到后台&#xff0c;后…

MySQL之汇总数据(AVG,COUNT,MAX,MIN,SUM)

备注&#xff1a;sum和count的不同&#xff1a;count()函数里面的参数是列名的的时候,那么会计算有值项的次数。 //行数Sum()函数里面的参数是列名的时候&#xff0c;是计算列名的值的相加&#xff0c;而不是有值项的总数。 //行内数据的和table testFieldTypeNullKeyDefault…

使用HTML5实现地理位置定位

HTML5 Geolocation&#xff08;地理定位&#xff09;用于定位用户的位置。定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私&#xff0c;除非用户同意&#xff0c;否则用户位置信息是不可用的。浏览器支持Internet Explorer 9、Fire…

暑假第五周计划

在上一周根据视频在电脑上安装了一个伪Hadoop&#xff0c;只有一个虚拟机&#xff0c;并且配置好了环境变量&#xff0c;可以在命令行运行程序自带的一些例子&#xff0c;比如计算圆周率&#xff0c;统计文本文件的字符数 遇到的问题主要就是对linux的操作命令不熟悉&#xff0…

Java EE CDI依赖关系消歧示例

在本教程中&#xff0c;我们将向您展示如何避免CDI bean中的依赖关系消除歧义。 在CDI中&#xff0c;我们可以为应用程序中不同客户端的接口的多个实现实现依赖项注入。 依赖关系消除歧义的问题是客户端如何在不同的实现中调用特定的实现&#xff0c;而不会发生任何错误。 为了…

linux java 安装配置_类Linux环境安装jdk1.8及环境变量配置详解

配置很简单&#xff0c;但是每次都要查一下&#xff0c;索性就记录下1. 安装前准备1.1 创建安装目录&#xff0c;习惯上通常安装在/usr/local/jdk8目录下mkdir /usr/local/jdk81.2 查看是否安装过jdk&#xff0c;安装前要把之前的删除干净# 通过jdk环境变量查看echo $JAVA_HOME…

Mac版Anaconda安装R语言iGraph包

Anaconda官网给出的R语言Igraph包安装方法&#xff1a;https://anaconda.org/r/r-igraph 查阅Anaconda官方文档&#xff0c;可以通过以下控制台命令安装R语言Igraph包。 conda install -c r r-igraph 在控制台执行后&#xff0c;系统可能会提示未找到conda指令&#xff0c; 所以…

Html5中Canvas(画布)的使用

什么是 Canvas&#xff1f;HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域&#xff0c;您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML5 页面添加 canvas 元素。规定元素的 id、宽…

20180813-20180817

这周没怎么学...&#xff08;哼没学还这么理直气壮&#xff01;&#xff09; 上周公司项目更新了一个版本 里面不小心用了es6的代码 然后好多低版本的手机就跑不起来了 这还是上线了半天之后才发现的 在这说一下 ios10.3以前的版本不支持es6 Android6.0以下不支持es6 最近一直…

多个动态包含一个JSF标签

每个JSF开发人员都知道ui&#xff1a;include和ui&#xff1a;param标签。 您可以包括一个facelet&#xff08;XHTML文件&#xff09;并传递一个对象&#xff0c;该对象将在包含的facelet中可用&#xff0c;如下所示&#xff1a; <ui:include src"/sections/columns.x…