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

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

1，首先页面中我们要先写一个按钮用来触发picker组件的显示与隐藏，不仅仅局限于按钮，只要能写点击事件的当然都可以

<button  bindtap="toggle">picker</button> //写一个触发picker的按钮,为按钮写点击事件

2，自定义picker组件的布局：

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: 
    })
},

注：关于这一块setTimeout的方法，柚子目前只想到这一种方法，如果不加setTimeout,就不会有从底部弹出的动画效果，而是会直接显示出来，如果有哪位大神有更好的方法，也可以教一下柚子，感激不尽！！！

好了，到此为止，picker组件已经完成，你可以在你的弹框里写你想写的东西，样式也可以根据你的需求任意改变了！！！

最后，希望能帮助到一些朋友！！！