위 챗 애플 릿 슬라이딩 선택 기의 실현 코드

본 고 는 위 챗 애플 릿 슬라이딩 선택 기의 실현 코드 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
위 챗 애플 릿 슬라이딩 선택 효과 구현


wxml 파일 에 서 는 picker 태그 로 선택 기 를 대표 합 니 다.bidchange 는 사용자 가 확인 을 클릭 한 후에 촉발 하 는 함수 입 니 다.index 는 picker 가 자체 적 으로 가지 고 있 는 매개 변수 입 니 다.사용자 가 확인 을 클릭 하면 bidchange 바 인 딩 함 수 는'detail.value'로 접근 할 수 있 습 니 다.첫 번 째 로 선택 한 index 값 은 0 으로 순서대로 증가 합 니 다.range 는 page 의 data 에서 배열 이 할당 하 는 값 을 정의 한 다음 배열 의 값 이 선택 기 에 있 는 옵션 으로 변 합 니 다.

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
   <view class='choseQuestion' >
    {{choseQuestionBank}}
   </view>
  </picker>

js 파일 에 대응 하 는 데이터 와 함 수 는 다음 과 같 습 니 다.

Page({
 data:{
  array:['  ','     ','  ','    ','linux'],
  type:0,
  choseQuestionBank:"    "
 },
 bindPickerChange: function (e) {
  var that=this
  console.log('picker      ，    ', e.detail.value)
  this.setData({
   type: e.detail.value,
   choseQuestionBank: that.data.array[e.detail.value]
  })
 },
})

선택 을 확인 하려 면 this.data.type 의 값 을 판단 하면 다른 선택 을 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.