WeChat Mini 프로그램 예: 슬라이딩 선택기 구현 방법(코드 포함)

이 기사는 WeChat 애플릿의 예를 제공합니다: 슬라이딩 선택기 구현 방법(코드 포함) 여기에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 도움이 되기를 바랍니다.

WeChat 미니 프로그램의 슬라이딩 선택 효과 구현

wxml 파일에서 선택기를 나타내는 데 사용되는 Picker 태그는 사용자가 OK를 클릭한 후 실행되는 함수입니다. 사용자 확인을 클릭하면 .detail.value를 사용하여 바인딩된 함수에 액세스할 수 있습니다. 첫 번째 선택 항목의 인덱스 값은 0이며 순차적으로 증가합니다. Range는 먼저 페이지의 데이터에서 배열을 정의하고 값을 할당해야 합니다. 그러면 배열의 값이 선택기의 옵션이 됩니다

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
   <view class=&#39;choseQuestion&#39; >
    {{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의 값을 판단하여 다른 선택을 할 수 있습니다.

추천 관련 기사:

WeChat 미니 프로그램 예: 상단 탭 전환 및 슬라이딩 전환 효과를 얻기 위해 내비게이션 바도 함께 이동합니다(코드)

WeChat 미니 프로그램 예: 현재 도시 위치 가져오기 위치

위 내용은 WeChat Mini 프로그램 예: 슬라이딩 선택기 구현 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!