设置了auto-play 的ion-slide-box中切换tab时，内置计时器失效导致不自动播放的解决办法

最新推荐文章于 2024-07-25 10:54:34 发布

黄昏追逐黎明

最新推荐文章于 2024-07-25 10:54:34 发布

阅读量1.5k

点赞数 1

分类专栏：心得文章标签：前端 ionic ion-slide-b

本文链接：https://blog.csdn.net/blak0011_2015/article/details/50537897

版权

心得专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如题。在相应的controller中监听view的加载，

在view每加载的时候写入下列逻辑：

$scope.$on('$ionicView.beforeEnter',function(){

$ionicSildeBoxDelegate.start();

})

不过呢，由于我的页面结构里有ion-slide-box的嵌套结构，所以这个语句导致我另外一个不需要自动播放的

slide-box在切换页面的时候或者加载进这个页面的时候也会跟着start()一下，也就是滑入下一个页面。

目前还在摸索处理办法。。。囧

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黄昏追逐黎明

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs

https://github.com/xiaohuoni

04-19

8492

本节课紧跟上节课的内容，没看过的朋友可以先看一下上节课。http://blog.csdn.net/onil_chen/article/details/51180884 太多的前言我就不写了，直接开始正题吧！我们要做的事一个这样的Banner。首先建立热门的相关文件。 www/js/contrololers目录下新建HotGameCtrl.js www/js/services目

Vue3视频播放器组件Vue3-video-play入门教程

热门推荐

猿小白的博客

03-11

1万+

Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。

1 条评论您还未登录，请先登录后发表或查看评论

ionic-tabbed-slide-box:离子选项卡式滑盖盒

05-25

离子选项卡式幻灯片框的完整克隆，此存储库是出于凉亭目的而制作的。该组件是包装。这将在幻灯片框的顶部包含选项卡/图标。单击选项卡/图标将触发滑块转到相应页面。＃＃＃预习： ###演示：[离子选项卡式幻灯片框] 正在安装在ionic / angular js文件后HTML中添加tabSlideBox.css和tabSlideBox.js < link href =" tabSlideBox.css " rel =" stylesheet "/> < script src =" tabSlideBox.js " > </ script > 将tabSlideBox包含为您的应用程序的模块 var app = angular.module('slidebox', ['ionic', 'tabSlideBox']); 在模板中添加html <

ionic,ion-slide-box获取后台数据后循环播放失效的解决方法。

我爱丶毛爷爷的博客

08-01

2564

属性中循环播放：dose-continue=‘true’，但是博主在项目遇到这样一个问题，从后台获取数据后将数据ng-repeat到中，发现循环播放失效了，后来在外网中找到了一个解决方法。 $ionicSlideBoxDelegate.update(); $ionicSlideBoxDelegate.loop(true); 在你的controller代码中获取数据成功的函数中加入这两句代

Ionic-轮播图ion-slide-box

weixin_33701617的博客

08-02

官方用法介绍：http://www.ionic.wang/js_doc-index-id-44.html 用法 1 <ion-slide-box> 2 <ion-slide> 3 <div class="box"><h1>BLUE</h1></div> 4 </ion-slide&g...

ionic 图片轮播ion-slide-box问题

weixin_30859423的博客

01-25

144

1、使用ion-slide可以实现图片轮播，但是如果在html中仅仅增加ion-slide是远远不够的，会出现两个问题： (注：使用的是angularjs。首先需要在,js文件中注入：$ionicSlideBoxDelegate) 一、有时候会出现图片无法加载出来。解决办法是：在相应的controller文件增加$ionicSlideBoxDelegate.update(); 二、轮...

ionic3 slides手动滑动轮播图后无法自动播放问题

qq_39252703的博客

09-05

1014

1.<ion-slides loop="true" autoplay="3000" pager (ionSlideAutoplayStop)="autoPlay()"> 2.import { Slides } from 'ionic-angular'; 3.@ViewChild(Slides) slides: Slides; 4.autoPlay() {this.slides...

uniapp - 强力解决 swiper 轮播图内嵌套视频导致滑动不流畅卡顿问题，轮播滑块视图容器里既有图片也有视频video组件共同存在出现滑动切换特别卡，轮播组件包裹视频播放器加载慢及层级过高解决

最新发布

王佳斌

07-25

5774

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，swiper，轮播图，轮播图嵌套视频，卡顿，加载慢，左右滑动不流畅，很卡，滑动过快就会卡住，uniapp使用swiper组件里嵌套视频与图片如何解决卡顿问题，详细解决教程，swiper里有视频video，播放器，视频+图片轮播，层级过高及卡顿问题，没等看完视频就自动切换了，报错，无法加载播放，uniapp的App安卓苹果端，video老是加载，APP端video组件播放视频卡顿，抖音，快手，上下滑动视

vue-video-player 解决微信自动全屏播放问题，横竖屏导致样式错乱问题

imwkey的博客

04-17

6657

对于vue-video-player，从github上找到一段代码，直接放页面！可以了，视频展示出来了！开始下一个功能。。。。这可能是大部分前端开发者一贯的思维模式，拿来一个插件，看着demo就做出来了，功能展示正常就OK了，但是一旦出了bug，就会面向百度编程或者面向Google编程！其实，我也是这样的，哈哈哈哈..... 废话不多说，最近在做一个视频播放的功能，找到vue-video...

微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行

王佳斌

10-27

3314

微信小程序播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext 配合 slider 显示播放进度条，用wx.createInnerAudioContext怎么写进度条？onTimeUpdate 怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate 失效问题，解决InnerAudioContext.onTimeUpdate不执行的问题，seek()方法执行后不走，InnerAudioContext.onTimeUpdate不触发小程序

ionic滑动框 ---轮播图（ion-slide-box）的使用

weixin_30407099的博客

07-31

186

1. html : 1 <ion-slide-box auto-play="true" slide-interval=3000 show-pager="false" does-continue='true'> 2 <ion-slide ng-repeat='foot in foots' pager-click='showCurrent($inde...

HTML__图片轮播ion-slide-box

dengwatuo5537的博客

07-23

144

先大概描述一下要做的界面：从网络请求json数据，获取网络图征数据，然后轮播图片。我遇到的问题是：图片不显示，代码如下 <ion-slide-boxdoes-continue="true"show-pager="true"auto-play="true"slide-interval="1000"> <ion-slideng-repeat="ite...

ionic之ion-slide-box实现图片轮播

柠檬加冰

08-09

7518

实现效果我是代码html代码 <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)

ionic入门教程第十四课-详细说明slide-tabs的实现和优化

https://github.com/xiaohuoni

04-28

3909

不少朋友对我在第十课中提到的slide-tabs比较感兴趣， http://blog.csdn.net/onil_chen/article/details/51191827第十课问的人，要Demo的人也多。所以今天花点时间，详细的讲解一下slide-tabs的实现和优化。首先我们先来看看最初的这个Demo的实现。（样式部分不详解，直接看Demo）先看效果吧！上面有

Ionic基础——幻灯指令 ion-slide-box

bboyjoe的博客

02-19

1万+

一.幻灯片 : ion-slide-box指令介绍 ion-slide-box可以做什么 1. 可以做启动切换页面 2. 可以做首页幻灯 3. 可以做页面左右滑动切换 Ionic放在哪个指令使用主要放在ion-view中使用幻灯片也是一种常见的UI表现方式，它从一组元素中选择一个投射到屏幕可视区域，用户可以通过滑动方式（向左或向右）进行切换

ionic 滑动块 ion-slide-box 左右无缝滚动

杨采臣的官方博客

03-14

2139

看官网教程也没有名称说明，最终通过查阅资料在属性中添加 auto-play="true" 可以实现左右无缝滚动

setInertval间隔时间问题

玉超

05-14

1287

假设我们有一个滚动条长为500px，我们想要设置在两秒内滚动到终点

swiper自动播放bug

ning_213的博客

08-31

2893

在引入js的时候，zepto.min.js要在swiper.jquery.min.js前面，不然会出现自动播放不了bug

ionic3 轮播图不自动播放、切换页面以后再返回也不再自动播放

Kilika的博客

06-08

1765

这几天在写一个b2b的app，然后发现首页轮播图不自动切换，然后各种网上找资料，终于解决了困扰我一生的问题。home.html<ion-slides *ngIf="slidess.length > 1" initialSlide="0" loop="true" autoplay="2300" speed="1000"> <ion-slide *n

解决vue-music中better-scroll轮播图自动轮播故障