WeChat 애플릿 구성 요소에 대한 자세한 설명: 슬라이더 슬라이딩 선택기

슬라이더 슬라이딩 선택기 구성요소 설명:

슬라이딩 선택기.

슬라이더 슬라이딩 선택기 샘플 코드는 다음과 같이 실행됩니다.

다음은 WXML 코드입니다.

<view>
  <text>设置left/right icon</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>设置step</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>显示当前value</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

다음은 JS 코드입니다. :

var pageData = {}
for (var i = 1; i <p style="text-align: left;">WXSS 코드는 다음과 같습니다.</p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

슬라이더 슬라이딩 선택기의 주요 속성

속성 이름

유형

기본값 값

설명

minNumber0 최소값
maxNumber100 최대값
stepNumber1 단계 크기, 값은 0보다 커야 하고 (최대 - 최소)로 나눌 수 있어야 합니다
disabledBooleanfalse 비활성화 여부
valueNumber0의 현재 값
show-valueBooleanfalse 현재 값 표시 여부
bindchangeEventHandle은 드래그 완료 후 트리거되는 이벤트, event.detail = {value: value}개인 경험 : min은 음수입니다

슬라이딩 선택기.
min과 max는 Number형이므로 min을 음수로 설정해도 괜찮나요?

WXML 코드는 다음과 같습니다.

<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

JS 코드는 다음과 같습니다.

var pageData = {}
for (var i = 1; i <p style="text-align: left;">WXSS 코드는 다음과 같습니다. </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

분석: min을 음수로 설정할 수 있고 기본 슬라이더가 0으로 표시되는 것을 볼 수 있습니다(value 속성이 이를 제어함을 나타냄). 그런 다음 왼쪽으로 드래그하면 음수가 표시됩니다.

개인 경험: min이 max보다 큰 경우

오류가 보고될 줄 알았는데 결과가 그 이상이었습니다. 내 기대. 실제로는 오류를 보고하지 않았는데 최대 위치까지 표시되고 슬라이더를 끌 수 없었습니다. 이것은 분명 큰 구덩이입니다!

WXML 코드는 다음과 같습니다.

<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

JS 코드는 다음과 같습니다.

var pageData = {}
for (var i = 1; i <p style="text-align: left;">WXSS 코드는 다음과 같습니다. </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

이 컨트롤은 나중에 변경될 수도 있습니다. 이 함정을 피하십시오.
또한 최대값은 최소값과 같을 수도 있습니다.

개인 경험: 슬라이더 2개

이전에 슬라이더를 사용해 본 적이 있는데 슬라이더를 2개 설정할 수 있습니다. 이 문서에는 적혀 있지 않으며, 미성숙하다고밖에 말할 수 없습니다.

개인 경험: wx.showToast를 사용하여 값 표시

기본 표시 방법 외에도 토스트 모드를 사용하여 선택한 값을 표시할 수도 있습니다.
아래는 WXML 코드입니다:

<view>
  <text>使用toast显示当前value</text>
  <view>
    <slider></slider>
  </view>
</view>

다음은 JS 코드입니다:

var pageData = {}
for (var i = 1; i <p style="text-align: left;">다음은 WXSS 코드입니다:</p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

위 내용은 WeChat 애플릿 구성 요소에 대한 자세한 설명: 슬라이더 슬라이딩 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!