要有遥不可及的梦想,也要有脚踏实地的本事。----------- 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组件已经完成,你可以在你的弹框里写你想写的东西,样式也可以根据你的需求任意改变了!!!
最后,希望能帮助到一些朋友!!!