Maison  >  Article  >  Applet WeChat  >  Exemple de programme WeChat Mini : Comment implémenter un sélecteur coulissant (avec code)

Exemple de programme WeChat Mini : Comment implémenter un sélecteur coulissant (avec code)

不言
不言original
2018-08-10 15:09:023863parcourir

Cet article vous présente un exemple d'applet WeChat : comment implémenter un sélecteur coulissant (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Implémenter l'effet de sélection glissante de l'applet WeChat

Dans le fichier wxml, il est représenté par un sélecteur de balise de sélecteur, bindchange est une fonction déclenchée après que l'utilisateur clique sur OK, et index est un paramètre fourni avec le sélecteur. Une fois que l'utilisateur a cliqué sur OK, la fonction liée à bindchange est accessible à l'aide de .detail.value. La valeur d'index de la première sélection est 0 et elle augmente en séquence. Range doit d'abord définir un tableau dans les données de la page et lui attribuer une valeur, puis la valeur du tableau deviendra l'option dans le sélecteur

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

Les données et fonctions correspondantes dans le js sont les suivants

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

Lorsque vous cliquez pour confirmer la sélection, il vous suffit de juger de la valeur de this.data.type pour faire différents choix.

Articles connexes recommandés :

Exemple d'applet WeChat : réaliser l'effet du changement d'onglet supérieur et du changement coulissant lorsque la barre de navigation se déplace avec elle (code)

Exemple d'applet WeChat : implémentation de code pour obtenir l'emplacement actuel de la ville et réautoriser la localisation géographique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn