c-picker-item

滚动选择器

属性

属性名类型必填默认值说明
listArray是['']滚动选择器滚动的数据，注意：data 属性名已废弃
default-indexNumber是0滚动选择器默认的数据索引
heightNumber是400滚动选择器的高度
text-alignString是"center"滚动选择器的文本样式:"居中"
c-bind:selectchangeEventHandle是 选择器滚动时触发: 返回事件对象: event.type="selectchange" event.detail = {index}

示例

  1. <template>
  2. <page title="c-picker-item演示">
  3.   <view class="container">
  4.     <text class="select-text">选择的值：{{provins[provinsIndex]}}</text>
  5.     <c-picker-item 
  6.       text-align="center" 
  7.       height="{{400}}" 
  8.       list="{{provins}}" 
  9.       default-index="{{defaultIndex}}"
  10.       c-bind:selectchange="selectchange"
  11.     >
  12.     </c-picker-item>
  13.   </view>
  14. </page>
  15. </template>
  16. <script>
  17. import { provins } from "./data";
  18. class CPickerItem {
  19.   data = {
  20.     provins: [
  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.     defaultIndex: 0,
  54.     provinsIndex: 0
  55.   }
  57.   computed = {}
  58.   watch  = {}
  60.   methods = {
  61.     selectchange(e) {               
  62.       this.provinsIndex = this.defaultIndex = e.detail.index;
  63.     }
  64.   }
  66.   beforeCreate() {}
  67.   created() {}
  68.   beforeMount() {}
  69.   mounted() {}
  70.   beforeDestroy() {}
  71.   destroyed() {}
  72. }
  74. export default new CPickerItem();
  75. </script>
  76. <style scoped>
  77. .container {
  78.   background: #f8f8f8;
  79. }
  80. .page-demo {
  81.   background: #fafafa;
  82. }
  83. .title-text {
  84.   color: #999;
  85.   margin: 30cpx 20cpx 10cpx;
  86.   display: block;
  87.   font-size: 28cpx;
  88. }
  89. .picker-item {
  90.   background: #fff;
  92.   border-top: 1px solid #d9d9d9;
  93.   border-bottom: 1px solid #d9d9d9;
  94.   display: flex;
  95.   flex-direction: row;
  96. }
  97. .picker-text-left {
  98.   font-size: 40cpx;
  99.   height: 70cpx;
  100.   line-height: 70cpx;
  101.   margin-left: 20cpx;
  102.   width: 300cpx;
  103. }
  104. .picker-text-right {
  105.   font-size: 40cpx;
  106.   height: 70cpx;
  107.   line-height: 70cpx;
  108.   margin-left: 20cpx;
  109.   flex: 1;
  110.   text-align: center;
  111. }
  112. .select-text {
  113.   font-size: 32cpx;
  114.   text-align: center;
  115.   display: flex;
  116.   justify-content: center;
  117.   align-items: center;
  118. }
  119. </style>
  120. <script cml-type="json">
  121. {
  122.     "base": {
  123.         "usingComponents": {
  124.             "c-picker-item": "cml-ui/components/c-picker-item/c-picker-item"
  125.         }
  126.     }
  127. }
  128. </script>

c-picker-item - 图1wx

c-picker-item - 图2web

c-picker-item - 图3native