WeChat Mini Program Example: How to implement a sliding selector (with code)

This article brings you an example of a WeChat applet: how to implement a sliding selector (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Realize the sliding selection effect of WeChat applet

##In the wxml file, use a picker tag to represent Selector, bindchange is a function triggered after the user clicks OK, and index is a parameter that comes with the picker. After the user clicks OK, the function bound to bindchange can be accessed using .detail.value. The index value of the first selection is 0, and it increases in sequence. Range needs to first define an array in the data of the page and assign it a value, and then the value of the array will become the option in the selector

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
   <view class=&#39;choseQuestion&#39; >
    {{choseQuestionBank}}
   </view>
  </picker>

The corresponding data and functions in the js file are as follows

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]
  })
 },
})

When you click to confirm the selection, you only need to judge the value of this.data.type to achieve different choices.

Recommended related articles:

WeChat applet example: realizing the effect of top tab switching and sliding switching when the navigation bar moves (code)

WeChat applet example: code implementation to obtain the current city location and re-authorize the geographical location

The above is the detailed content of WeChat Mini Program Example: How to implement a sliding selector (with code). For more information, please follow other related articles on the PHP Chinese website!