微信小程序自定义picker弹框组件-蒲公英云

微信小程序自定义picker弹框组件

要有遥不可及的梦想，也要有脚踏实地的本事。—————- Grapefruit.Banuit Gang(香柚帮)

      柚子写项目遇到了一个问题，就是微信小程序官方文档上面的弹框组件picker,它的样式不可操控，当picker的选择项的内容过长时，会显示省略号，但是我的需求是换行展示全部的，但是查了很多博客资料发现，不管怎么操作都是不能更改picker组件的样式，最后没办法，就只能自定义了一个和picker一摸一样的组件，自己写的组件，想怎么改样式就怎么改样式，下面开始说步骤：
   1，首先页面中我们要先写一个按钮用来触发picker组件的显示与隐藏，不仅仅局限于按钮，只要能写点击事件的当然都可以 
<button  bindtap="toggle">picker</button> //写一个触发picker的按钮,为按钮写点击事件
  2，自定义picker组件的布局：
<!-- 自定义picker -->
      <!-- catchtouchmove为true时禁止页面滑动，只在手机上有效果，微信开发者工具没有效果 -->
      <view class='picker' catchtouchmove="true">
          <!-- 蒙层，mongolia_show是控制蒙层的显示隐藏 -->
          <view class='mongolia {
   {mongolia_show}}' bindtap='mongolia'></view>
          <!-- 弹出框，translateY是控制弹出框出现的动画效果，从底部弹出 -->
          <view class='content_popup {
   {translateY}}'>
          </view>
      </view>

3，完善picker组件布局的样式：

/* 蒙层 */
.mongolia{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}
.mongolia_show{
    display: block;
}
/* 弹出框 */
.content_popup{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    transform: translateY(100%);
    transition: all 0.6s ease;
    z-index: 11;
}
.translateY{
    transform: translateY(50%);
}

4，剩下的就是js部分了，主要是控制显示隐藏的

data(){
    mongolia_show: '',
    translateY: '',
},
// 点击按钮
toggle() {
    this.setData({
        mongolia_show: 'mongolia_show',
    })
    setTimeout(() => {
        this.setData({
            translateY: 'translateY'
        })
    }, 1)
},
// 点击蒙层,隐藏picker
mongolia(){
    this.setData({
        mongolia_show: '',
        translateY: ''
    })
},