要有遥不可及的梦想，也要有脚踏实地的本事。----------- 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)},// 点击蒙层,隐藏pickermongolia(){this.setData({mongolia_show: '',translateY: ''})},
注：关于这一块setTimeout的方法，柚子目前只想到这一种方法，如果不加setTimeout,就不会有从底部弹出的动画效果，而是会直接显示出来，如果有哪位大神有更好的方法，也可以教一下柚子，感激不尽！！！
好了，到此为止，picker组件已经完成，你可以在你的弹框里写你想写的东西，样式也可以根据你的需求任意改变了！！！
最后，希望能帮助到一些朋友！！！
