小程序 picker-view类似日历的滚动选择器

以你之姓@ 2021-07-24 20:18 701阅读 0赞

picker-view
    	
    	其中只可放置picker-view-column组件,其它节点不会显示。
    	必须设置picker-view的宽高
      	 <picker-view
    	    value="{
       {[n,n,n]}}"	依次表示picker-view内的各个picker-view-column选择的第几项(下标从0开始),数字大于 picker-view-column可选项长度时,选择最后一项。
    	    indicator-style 	设置选择器中间选中框的样式
    	    indicator-class 	设置选择器中间选中框的类名
    	    mask-style			设置蒙层的样式,蒙层范围为如下图边框和颜色范围
    	    mask-class 			设置蒙层的类名
    	    bindchange 			滚动选择时触发change事件,event.detail.value,表示picker-view内的各个picker-view-column当前选择的是第几项(下标从0开始)
    		bindpickstart 		当滚动选择开始时候触发事件,无event.detail.value
    		bindpickend 		当滚动选择结束时候触发事件,无event.detail.value
    	 >
    		<picker-view-column
    			style="line-height: 50px; text-align: center;"	设置当前列的样式,如用于选中框内的文字居中对齐等
    		>
    			可放置任意组件
    		</picker-view-column>
    		<picker-view-column
    			style="line-height: 50px; text-align: center;"
    		>
    			...
    		</picker-view-column>
      </picker-view>

代码示例:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210702165214357.png]

<picker-view
        value="{ {[1,1,2,3]}}"
        indicator-style="height: 50px;" 
        style="width: 100%; height: 300px;" 
        mask-style="border:solid 2px red;background-color:rgba(255,0,0,0.5)"
        bindchange="enTop"
      >
        <picker-view-column
          style="line-height: 50px; text-align: center;"
        >
          <view>1</view>
          <view>2</view>
          <view>3</view>
          <view>4</view>
        </picker-view-column>
        <picker-view-column
           style="line-height: 50px; text-align: center;"
        >
          <view>哇</view>
          <view>哈</view>
          <view>嘻</view>
          <view>咔</view>
        </picker-view-column>
        <picker-view-column
          style="line-height: 50px; text-align: center;"
        >
          <view>白</view>
          <view>昼</view>
          <view>黑</view>
          <view>夜</view>
        </picker-view-column>   
      </picker-view>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/9f9f282e133d495e9602d1b946dbad28.png
[20210702165214357.png]: /images/20210724/4e2e37db09a64037a5c29725b082a550.png