c-picker-panel

从底部弹起的控制板。

属性

属性名类型必填默认值说明
showBoolean是false是否点击打开底部控制板
titleString否"请选择"控制板的标题
header-heightNumber是100底部控制板标题栏的高度
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-picker-panel
  1. <template>
  2. <page title="c-picker-panel演示">
  3.   <view class="container">
  4.       <text class="select-text" c-bind:tap="showClick">点击选择：{{provins[provinsIndex]}}</text>  
  5.       <c-picker-panel 
  6.           show="{{panelShow}}" 
  7.           height="{{500}}" 
  8.           header-height="{{100}}" 
  9.           c-bind:cancel="cancel"
  10.           c-bind:confirm="confirm">
  11.               <c-picker-item 
  12.                   text-align="center" 
  13.                   height="{{400}}" 
  14.                   list="{{provins}}" 
  15.                   default-index="{{defaultIndex}}"
  16.                   c-bind:selectchange="selectchange">
  17.               </c-picker-item>
  18.       </c-picker-panel>
  19.   </view>
  20. </page>
  21. </template>
  22. <script>
  23. import { provins } from "./data";
  24. class CPickerPanel {
  25.   data = {
  26.     provins: [
  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.     defaultIndex: 0,
  60.     provinsIndex: 0,
  61.     panelShow: false
  62.   }
  64.   computed = {}
  65.   watch  = {}
  67.   methods = {
  68.     selectchange(e) {
  69.       this.provinsIndex = this.defaultIndex = e.detail.index;
  70.     },
  71.     showClick() {
  72.       this.panelShow = true;
  73.     },
  74.     cancel() {
  75.       this.panelShow = false;
  76.     },
  77.     confirm() {
  78.       this.panelShow = false;
  79.     }
  80.   }
  82.   beforeCreate() {}
  83.   created() {}
  84.   beforeMount() {}
  85.   mounted() {}
  86.   beforeDestroy() {}
  87.   destroyed() {}
  88. }
  90. export default new CPickerPanel();
  91. </script>
  92. <style scoped>
  93. .container {
  94.   background: #f8f8f8;
  95.   position: absolute;
  96.   top: 88cpx;
  97.   bottom: 0;
  98.   left: 0;
  99.   right: 0;
  100. }
  101. .page-demo {
  102.   background: #fafafa;
  103.   position: absolute;
  104.   top: 0;
  105.   bottom: 0;
  106.   left: 0;
  107.   right: 0;
  108. }
  109. .title-text {
  110.   color: #999;
  111.   margin: 30cpx 20cpx 10cpx;
  112.   display: block;
  113.   font-size: 28cpx;
  114. }
  115. .picker-item {
  116.   background: #fff;
  117.   border-top: 1px solid #d9d9d9;
  118.   border-bottom: 1px solid #d9d9d9;
  119.   display: flex;
  120.   flex-direction: row;
  121. }
  122. .picker-text-left {
  123.   font-size: 40cpx;
  124.   height: 70cpx;
  125.   line-height: 70cpx;
  126.   margin-left: 20cpx;
  127.   width: 300cpx;
  128. }
  129. .picker-text-right {
  130.   font-size: 40cpx;
  131.   height: 70cpx;
  132.   line-height: 70cpx;
  133.   margin-left: 20cpx;
  134.   flex: 1;
  135.   text-align: center;
  136. }
  137. .select-text {
  138.   font-size: 32cpx;
  139.   text-align: center;
  140.   display: flex;
  141.   justify-content: center;
  142.   align-items: center;
  143. }
  144. </style>
  145. <script cml-type="json">
  146. {
  147.     "base": {
  148.         "usingComponents": {
  149.             "c-picker-panel": "cml-ui/components/c-picker-panel/c-picker-panel",
  150.             "c-picker-item": "cml-ui/components/c-picker-item/c-picker-item"
  151.         }
  152.     }
  153. }
  154. </script>

c-picker-panel - 图1wx

c-picker-panel - 图2web

c-picker-panel - 图3native