ionic（4）
I have same problem.
Problem that, when Ionic parse html, it check:
if (slides.length & 2) options.continuous
and even if you run&$ionicSlideBoxDelegate.update();&it's
not help, because options is not checked again.
I found solution&- do not allow render our slider before getting data for&ng-repeat.
For example, for your code should be like this:
&ion-slide-box show-pager=&false& auto-play=&true& does-continue=&true& ng-if=&cities&&
&ion-slide collection-repeat=&city in cities&&
&h1&{{city.name}}&/h1&
&/ion-slide&
&/ion-slide-box&
用ng-if判断遍历的数组是否为空，不为空时再用repeat遍历该数组即可
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：13642次
排名：千里之外
转载：20篇
(1)(3)(4)(12)(3)当slider数据列表是动态获取时，如果数据结果只有2条数据时，slider列表会多复制俩个，通过下面的slideChange方法做个判断可以解决这个bug
第一步：添加slideChande方法
&ion-slide-box auto-play="true" does-continue="true" slide-interval="3000" on-slide-changed="slideChanged($index)"&
　　&ion-slide ng-repeat="pic in pics"&&img ng-src="{{pic}}" src="" alt="" width="" height="" /&&/ion-slide&
&/ion-slide-box&
app.controller('defaultCtrl', function($scope, $timeout, $ionicSlideBoxDelegate) {
$scope.slideChanged = function(index) {
$scope.slideIndex =
if ( ($ionicSlideBoxDelegate.count() -1 ) == index ) {
$timeout(function(){
$ionicSlideBoxDelegate.slide(0);
　　$http.get('api/get/slide_pics').success(function (response) {
　　　　$scope.pics = response.
&第二步：更改源文件
从源文件（ionic.bundle.js）里找到以下代码 　　提示：在setup()方法里找
if (slides.length & 2) options.continuous = false;
用下面代码替换
if(slides.length&2){
options.initialContinuous=options.
options.continuous=false;
}elseif(options.initialContinuous){
options.continuous=options.initialC
阅读(...) 评论()ionic组件接着上一篇，我这里将一些相关组件的介绍合在一起，给出综合例子和显示效果，方便自己查阅。另外官网的JS API介绍文档有问题，国内访问不能跳转，请参考我的另一篇.
教程索引：(持续更新)转载请注明出处：
ionic中文详解CSS组件1
range范围选择range组件用于在某个范围内选择值。12345678910111213&div class=&range&&
&i class=&icon ion-volume-low&&&/i&
&input type=&range& name=&volume&&
&i class=&icon ion-volume-high&&&/i&&/div&&div class=&list&&
&div class=&item range range-positive&&
&i class=&icon ion-ios7-sunny-outline&&&/i&
&input type=&range& name=&volume& min=&0& max=&100& value=&33&&
&i class=&icon ion-ios7-sunny&&&/i&
&/div&&/div&
select下拉选框下拉框用于在多个候选项中选择一个值，不同的浏览器表现形式不一样。注意item-select样式。1234567891011121314&div class=&list&&
&label class=&item item-input item-select&&
&div class=&input-label&&
Lightsaber
&option&Blue&/option&
&option selected&Green&/option&
&option&Red&/option&
&/label&&/div&
tabs是水平排列的button或link，用于切换视图。是一种很常用的导航方法。1234567891011&div class=&tabs&&
&a class=&tab-item&&
&a class=&tab-item&&
&a class=&tab-item&&
&/a&&/div&
仅有图标的tabs1234567891011&div class=&tabs tabs-icon-only&&
&a class=&tab-item&&
&i class=&icon ion-home&&&/i&
&a class=&tab-item&&
&i class=&icon ion-star&&&/i&
&a class=&tab-item&&
&i class=&icon ion-gear-a&&&/i&
&/a&&/div&
icon在上，下有文字的tabs，注意tabs-icon-top样式1234567891011121314&div class=&tabs tabs-icon-top&&
&a class=&tab-item&&
&i class=&icon ion-home&&&/i&
&a class=&tab-item&&
&i class=&icon ion-star&&&/i&
&a class=&tab-item&&
&i class=&icon ion-gear-a&&&/i&
&/a&&/div&
icon在左的tabs，注意tabs-icon-left标签1234567891011121314&div class=&tabs tabs-icon-left&&
&a class=&tab-item&&
&i class=&icon ion-home&&&/i&
&a class=&tab-item&&
&i class=&icon ion-star&&&/i&
&a class=&tab-item&&
&i class=&icon ion-gear-a&&&/i&
&/a&&/div&
grid系统ionic的网格系统采用的是 ，所有支持ionic的设备都支持flexbox。可以用row样式指定行，用col样式指定列。
平均分的grid1234567&div class=&row&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&&/div&
指定列宽的grid1234567891011121314151617181920&div class=&row&&
&div class=&col col-50&&.col.col-50&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&&/div&&div class=&row&&
&div class=&col col-75&&.col.col-75&/div&
&div class=&col&&.col&/div&&/div&&div class=&row&&
&div class=&col&&.col&/div&
&div class=&col col-75&&.col.col-75&/div&&/div&&div class=&row&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&&/div&
12345678910Explicit Column Percentage Classnames.col-10
10%.col-20
20%.col-25
25%.col-33
33.3333%.col-50
50%.col-67
66.6666%.col-75
75%.col-80
80%.col-90
有偏移量的grid12345678910111213&div class=&row&&
&div class=&col col-33 col-offset-33&&.col&/div&
&div class=&col&&.col&/div&&/div&&div class=&row&&
&div class=&col col-33&&.col&/div&
&div class=&col col-33 col-offset-33&&.col&/div&&/div&&div class=&row&&
&div class=&col col-33 col-offset-67&&.col&/div&&/div&
12345678910Offset Column Percentage Classnames.col-offset-10
10%.col-offset-20
20%.col-offset-25
25%.col-offset-33
33.3333%.col-offset-50
50%.col-offset-67
66.6666%.col-offset-75
75%.col-offset-80
80%.col-offset-90
纵向对其的grid12345678910111213141516171819202122232425262728293031323334&div class=&row&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&1&br&2&br&3&br&4&/div&&/div&&div class=&row&&
&div class=&col col-top&&.col&/div&
&div class=&col col-center&&.col&/div&
&div class=&col col-bottom&&.col&/div&
&div class=&col&&1&br&2&br&3&br&4&/div&&/div&&div class=&row row-top&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&1&br&2&br&3&br&4&/div&&/div&&div class=&row row-center&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&1&br&2&br&3&br&4&/div&&/div&&div class=&row row-bottom&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&1&br&2&br&3&br&4&/div&&/div&
响应式grid123456&div class=&row responsive-sm&&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&
&div class=&col&&.col&/div&&/div&
1234Responsive Class
Break when roughly.responsive-sm
Smaller than landscape phone.responsive-md
Smaller than portrait tablet.responsive-lg
Smaller than landscape tablet
color定制ionic提供的各种配色如下：你也可以修改ionic.css，由于使用的sass，可以修改_variables.scss文件来扩展或修改配色。
paddingionic中许多组建都有默认的padding。你也可以修改，通过如下的样式
padding， Adds padding around every side.
padding-vertical， Adds padding to the top and bottom.
padding-horizontal， Adds padding to the left and right.
padding-top， Adds padding to the top.
padding-right， Adds padding to the right.
padding-bottom， Adds padding to the bottom.
padding-left， Adds padding to the left.
动画样式fade-innav-title-slide-ios7no-animationreverseslide-in-leftslide-in-rightslide-in-upslide-left-right-ios7slide-left-rightslide-out-leftslide-out-rightslide-right-left-ios7slide-right-left
谢谢！转载请注明出处：
有问题请留言。T_T
皓眸大前端开发学习在DOM里ng-repeat那个重复的标签上写ng-init="$last?lastAction($index):''"，用三目表达式来判断是不是最后一个，是最后一个就去执行lastAction()函数。
$scope.lastAction = function(index){
　　console.log(index+" is the last one.....")
当采用ionic ion-slide-box时，当前的slide box上有一部分内容也要进行滚动，比如banner，滚动banner时肯定会触发整个页面的滚动，为了达到滚动banner而不带动整个页面的滚动的目的，可以这样来操作
$timeout(function(){
document.getElementById('banners').addEventListener('touchstart',function(){
//console.log('touch start.....')
$ionicSlideBoxDelegate.$getByHandle('home-box').enableSlide(false);
document.getElementById('banners').addEventListener('touchend',function(){
//console.log('touch end.....')
$ionicSlideBoxDelegate.$getByHandle('home-box').enableSlide(true);
document.getElementById('banners').addEventListener('touchcancel',function(){
//console.log('touch cancel.....')
$ionicSlideBoxDelegate.$getByHandle('home-box').enableSlide(true);
所有的数据都是通过异步获取的，所以通过$timeout()来包裹这些事件。当touch banner部分内容区时，禁止整个页面的滚动，当touch结束时，开启整个页面的滚动。还有一个问题要注意，如果是多个同类名的小滚动区域也要实现该功能，如果只是将上面的id名改成classname，是会报错的。
用上述原生js写的话，需要使用for循环遍历；若是用jQuery，就只需要获取类名
$timeout(function(){
var columnList = document.getElementsByClassName("column-list");
for(var i=0;i&columnList.i++){
columnList[i].addEventListener('touchstart',function(){
console.log("start....")
$ionicSlideBoxDelegate.$getByHandle('home-box').enableSlide(false);
$(".column-list").on('touchstart',function(){
console.log("start....")
$ionicSlideBoxDelegate.$getByHandle('home-box').enableSlide(false);
$(".column-list").on('touchend touchcancel',function(){
console.log('touch end.....')
$ionicSlideBoxDelegate.$getByHandle('home-box').enableSlide(true);
阅读(...) 评论()