c-picker

底部弹起的滚动选择器

属性

属性名类型必填默认值说明
showBoolean是false是否点击打开滚动选择器
titleString否"请选择"滚动选择器的标题
header-heightNumber是100滚动选择器标题栏的高度
data-heightNumber是400滚动选择器数据栏的高度
listArray是滚动选择器滚动的数据,注意：，在新版内置组件，data 属性名已废弃
default-indexNumber是0滚动选择器默认的数据索引
text-alignString是"center"滚动选择器的文本样式:"居中"
item-styleString否自定义每一项item的样式，如 "color:blue;text-align:center;"
cancel-btn-styleString否自定义取消按钮的样式，如 "color:red;text-align:center;"
confirm-btn-styleString否自定义确定按钮的样式,如 "color:red;text-align:center;"
c-bind:cancelEventHandle否用户点击"取消"时触发:返回事件对象:event.type="cancel"
c-bind:confirmEventHandle否用户点击"确定"时触发:返回事件对象:event.type="confirm"
c-bind:selectchangeEventHandle是 选择器滚动时触发: 返回事件对象: event.type="selectchange" event.detail = {index}

示例

  1. <template>
  2. <page title="c-picker演示">
  3.     <view>
  4.         <text class="select-text" c-bind:tap="showClick">点击选择：{{provins[provinsIndex]}}</text>
  5.         <c-picker
  6.             show="{{pickerShow}}"
  7.             height="{{500}}"
  8.             header-height="{{100}}"
  9.             text-align="center"
  10.             data-scroller-height="{{400}}"
  11.             list="{{provins}}"
  12.             default-index="{{defaultIndex}}"
  13.             confirm-btn-style="color:red"
  14.             cancel-btn-style="color:red"
  15.             c-bind:cancel="cancel"
  16.             c-bind:confirm="confirm"
  17.             c-bind:selectchange="selectchange">
  18.         </c-picker>
  19.     </view>
  20. </page>
  21. </template>
  22. <script>
  23. class CPicker {
  24.   data = {
  25.     provins: [
  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.     defaultIndex: 0,
  59.     provinsIndex: 0,
  60.     pickerShow: false
  61.   }
  63.   computed = {}
  64.   watch  = {}
  66.   methods = {
  67.     selectchange(e) {
  68.       this.provinsIndex = this.defaultIndex = e.detail.index;
  69.     },
  70.     showClick() {
  71.       this.pickerShow = true;
  72.     },
  73.     cancel() {
  74.       this.pickerShow = false;
  75.     },
  76.     confirm() {
  77.       this.pickerShow = false;
  78.     }
  79.   }
  81.   beforeCreate() {}
  82.   created() {}
  83.   beforeMount() {}
  84.   mounted() {}
  85.   beforeDestroy() {}
  86.   destroyed() {}
  87. }
  89. export default new CPicker();
  90. </script>
  91. <style scoped>
  92. .container {
  93.   background: #f8f8f8;
  94. }
  95. .page-demo {
  96.   background: #fafafa;
  97. }
  98. .title-text {
  99.   color: #999;
  100.   margin: 30cpx 20cpx 10cpx;
  101.   display: block;
  102.   font-size: 28cpx;
  103. }
  104. .picker-item {
  105.   background: #fff;
  106.   border-top: 1px solid #d9d9d9;
  107.   border-bottom: 1px solid #d9d9d9;
  108.   display: flex;
  109.   flex-direction: row;
  110. }
  111. .picker-text-left {
  112.   font-size: 40cpx;
  113.   height: 70cpx;
  114.   line-height: 70cpx;
  115.   margin-left: 20cpx;
  116.   width: 300cpx;
  117. }
  118. .picker-text-right {
  119.   font-size: 40cpx;
  120.   height: 70cpx;
  121.   line-height: 70cpx;
  122.   margin-left: 20cpx;
  123.   flex: 1;
  124.   text-align: center;
  125. }
  126. .select-text {
  127.   font-size: 32cpx;
  128.   text-align: center;
  129.   display: flex;
  130.   justify-content: center;
  131.   align-items: center;
  132. }
  133. </style>
  134. <script cml-type="json">
  135. {
  136.     "base": {
  137.         "usingComponents": {
  138.             "c-picker": "cml-ui/components/c-picker/c-picker"
  139.         }
  140.     }
  141. }
  142. </script>

c-picker - 图1wx

c-picker - 图2web

c-picker - 图3native