微信小程序自定义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: ''})
},

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

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

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

微信小程序自定义picker弹框组件相关推荐

微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
微信小程序自定义picker多列选择器
需求说明使用 mpvue 实现自定义的 picker 多列选择器. 1.数据结构说明根据 picker 的数据特征,需要构造一个如下所示的数据结构.data数组中的三个元素,分别用于渲染 pick ...
微信小程序 - 商城项目 - 搜索框组件
搜索框组件引入自定义的搜索框组件引入扩展组件需要对搜索框组件实现一个粘性布局功能,引入官方的扩展组件 npm 安装扩展组件引入扩展组件构建 npm 实现粘性布局(在iphone5上可以实现, ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...

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

微信小程序自定义picker弹框组件相关推荐

最新文章

热门文章