微信小程序中多列选择器 range-key 的运用

why 146 2024-08-19

这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序中多列选择器 range-key 的运用

本文实例为大家分享了微信小程序多列选择器的具体代码，供大家参考，具体内容如下


1

2

3

4

5

<picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{&#39;name&#39;}}">

 <view class="picker">

  当前选择：{{objectMultiArray[0][multiIndex2[0]].name}}，{{objectMultiArray[1][multiIndex2[1]].name}}

 </view>

</picker>



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

Page({

 

 /**

 * 页面的初始数据

 */

 data: {

 objectMultiArray: [

  [

  {

   id: 0,

   name: &#39;无脊柱动物&#39;

  },

  {

   id: 1,

   name: &#39;脊柱动物&#39;

  }

  ], [

  {

   id: 0,

   name: &#39;扁性动物&#39;

  },

  {

   id: 1,

   name: &#39;线形动物&#39;

  },

  {

   id: 2,

   name: &#39;环节动物&#39;

  },

  {

   id: 3,

   name: &#39;软体动物&#39;

  },

  {

   id: 3,

   name: &#39;节肢动物&#39;

  }

  ]

 ],

 multiIndex2: [0, 0],

 },

 

 

 bindMultiPickerChange2: function (e) {

 console.log(&#39;picker发送选择改变，携带值为&#39;, e.detail.value)

 this.setData({

  multiIndex2: e.detail.value

 })

 },

 bindMultiPickerColumnChange2: function (e) {

 console.log(&#39;修改的列为&#39;, e.detail.column, &#39;，值为&#39;, e.detail.value);

 var data = {

  objectMultiArray: this.data.objectMultiArray,

  multiIndex2: this.data.multiIndex2

 };

 data.multiIndex2[e.detail.column] = e.detail.value;

 switch (e.detail.column) {

  case 0:

  switch (data.multiIndex2[0]) {

   case 0:

   data.objectMultiArray[1] = [

    { id: 0, name: &#39;扁性动物&#39; },

    { id: 1, name: &#39;线形动物&#39; },

    { id: 2, name: &#39;环节动物&#39; },

    { id: 3, name: &#39;软体动物&#39; },

    { id: 3, name: &#39;节肢动物&#39; }

   ];

   // data.multiArray[2] = [&#39;猪肉绦虫&#39;, &#39;吸血虫&#39;];

   break;

   case 1:

   data.objectMultiArray[1] = [

    { id: 0, name: &#39;鱼&#39; },

    { id: 1, name: &#39;线形两栖动物&#39; },

    { id: 2, name: &#39;爬行动物&#39; }

   ];

   break;

  }

  data.multiIndex2[1] = 0;

  // data.multiIndex[2] = 0;

  break;

 }

 this.setData(data);

 }

 

 

})


请记得点赞额！！！

以上就是本文的全部内容，希望对大家的学习有所帮助。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 代码 js
上一篇:微信小程序里购物车功能的具体实现办法
下一篇:小程序怎么开发app设计-详细教程及技巧
相关文章

 发表评论

暂时没有评论，来抢沙发吧~