Question

我在离子滑动组件内设置范围滑块时遇到了一些麻烦。实际上，当我试图刷扫范围值时，离子检测到我正试图滑动到另一张幻灯片。

所以我有两个问题：是否有一种简单的方法可以在离子载玻片内容中实现范围，可以使用范围滑块设置数据而无需滑动到另一张幻灯片，相反，可以在不影响范围值的情况下滑动到另一张幻灯片。

如果没有任何简单的方法可以做到这一点，我试图改变滑动的方向去另一张幻灯片，并根据文档我尝试过但我编译错误： SyntaxError: /my/path/diagnostic.js: Unexpected token (8:18) while parsing file: /my/path/diagnostic.js所以错误是针对这一行：diagnosticSlides = {

这是我的代码：

diagnostic.js

import {Page, NavController, NavParams, Slides} from 'ionic-angular';

@Page({
templateUrl: 'build/pages/diagnostic/diagnostic.html'
})
export class DiagnosticPage {

// Code for changing swiping direction -- not working
diagnosticSlides = {
initialSlide: 1,
loop: false,
direction: 'vertical'
};

static get parameters() {
return [[NavController], [NavParams]];
}

constructor(nav, navParams) {
this.nav = nav;
}
}

diagnostic.html

<ion-slides [options]="diagnosticSlides" pager>
<ion-slide style="background-color: blue">
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Other slide</h2>
</ion-slide>
</ion-slides>

你能帮我吗？

先谢谢，

Answer 1

从可用的离子文档range component

因此，您可以使用此组件的ionFocus和ionBlur，并在这两个事件之间使用lockSwipes(true)方法。

public swipe: IonSlides;
@ViewChild(IonRange) range: IonRange;

this.range.ionFocus.subscribe(() => {
        this.swipe.lockSwipes(true);
    });

this.range.ionBlur.subscribe(() => {
        this.swipe.lockSwipes(false);
    });

离子载体Ionic2的范围

1 个答案: