c-picker-item

滚动选择器

示例

  1. <template>
  2.   <view>
  3.     <text class="select-text">选择的值：{{provins[provinsIndex]}}</text>
  4.     <c-picker-item
  5.       text-align="center"
  6.       height="{{400}}"
  7.       list="{{provins}}"
  8.       default-index="{{defaultIndex}}"
  9.       c-bind:selectchange="selectchange"
  10.     ></c-picker-item>
  11.   </view>
  12. </template>
  13. <script>
  14. class Index {
  15.   data = {
  16.     provins: [
  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.     defaultIndex: 0,
  50.     provinsIndex: 0
  51.   }
  52.   methods = {
  53.     selectchange(e) {
  54.       this.provinsIndex = this.defaultIndex = e.detail.index;
  55.     }
  56.   }
  57. };
  58. export default new Index();
  59. </script>
  60. <style scoped >
  61. .select-text {
  62.   font-size: 32cpx;
  63.   text-align: center;
  64. }
  65. </style>
  67. <script cml-type="json">
  68. {
  69.   "base": {
  70.     "usingComponents": {
  71.       "c-picker-item": "cml-ui/components/c-picker-item/c-picker-item"
  72.     }
  73.   }
  74. }
  75. </script>