微信小程序实现自定义picker选择器弹窗内容


Posted in Javascript onMay 26, 2020

微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容。

例如:

微信小程序实现自定义picker选择器弹窗内容

但是大多数开发程序的情况下还是需要自己写样式的,或是内容的。

例如:

微信小程序实现自定义picker选择器弹窗内容

wxml

<view class="free-btns" style="margin-top: 10vh;background:none;">
 <button class="free-btn" bindtap="toggleDialog">
 选定国家:{{value}}
 </button>
 </view>

 <view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}">
 <view class="free-dialog__mask" bindtap="toggleDialog" />
 <view class="free-dialog__container">
 <view style="padding: 5% 5% 15%;">
 <form bindsubmit='submit' bindreset="reset">
 <view bindtap='freetoBack' class="free-button free-dialog-reset">取消</view>
 <view bindtap='freeBack' class="free-button free-dialog-submit">确定</view>

 <radio-group class='free-radios' bindchange="radioChange">
 <label class="free-radio" bindtap="click" wx:for="{{items}}" wx:key="{{items}}" data-id="{{index}}" style="{{index==id?'background:#48c23d;color:#fff;':'background:#fff;color:#000;'}}">
 <radio value="{{item.name}}" name="{{item.value}}"></radio>
 <label class="free-text">{{item.value}}</label>
 </label>
 </radio-group>
 </form>

 </view>
 </view>
</view>

css

.free-dialog__mask {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(0, 0, 0, 0.7);
 display: none;
}
.free-dialog__container {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 750rpx;
 background: white;
 transform: translateY(150%);
 transition: all 0.4s ease;
 z-index: 11;
}
.free-dialog--show .free-dialog__container {
 transform: translateY(0);
}
.free-dialog--show .free-dialog__mask {
 display: block;
}
/*模态框中的内容*/
.free-button{
 display: inline-block;
 width:50px;
 text-align: center;
 font-size:20px;
 color:#707070;
 margin-bottom:20px;
}
.free-dialog-submit{
 float: right;
 color:#48c23d;
}
radio-group{
 margin:10rpx 0rpx;
}
radio-group>label{
 width:22.5%;
 display: inline-block;
 border:1px solid #ddd;
 padding:10px 0px;
 margin:0px 2px 2px;
}

radio-group label radio{
 width:100%;
 z-index: 3;
 display: none;
}
.checked{
 background:#48c23d;
 color:#fff;
}
radio-group label .free-text{
 width:100%;
 text-align: center;
 display: inline-block;
}

js

Page({
 data: {
 showDialog: false,
 items: [
 { name: '中国', value: '中国' },
 { name: '美国', value: '美国' },
 { name: '巴西', value: '巴西' },
 { name: '日本', value: '日本' },
 { name: '英国', value: '英国' },
 { name: '法国', value: '法国' },
 { name: '韩国', value: '韩国' },
 { name: '俄罗斯', value: '俄罗斯' },]

 },
 /*点击变色*/
 click:function(e){
 var id = e.currentTarget.dataset.id
 var that = this
 that.setData({
 id:id
 })
 },
 onLoad: function (options) {
 var that = this
 that.setData({
 value:'show'
 })
 },
 radioChange: function (e) {
 console.log('radio发生change事件,携带value值为:', e.detail.value)
 var that = this
 that.setData({
 value: e.detail.value
 })
 console.log(this.data.value)
 },
 toggleDialog() {
 this.setData({
 showDialog: !this.data.showDialog
 });
 },
 freeBack:function(){
 var that = this
 if(this.data.value=='show'){
 wx.showModal({
 title: '提示',
 content: '你没有选择任何内容',
 })
 }
 that.setData({
 showDialog: !this.data.showDialog
 })
 },
 freetoBack: function () {
 var that = this
 wx.showModal({
 title: '提示',
 content: '你没有选择任何内容',
 })
 that.setData({
 showDialog: !this.data.showDialog,
 value:'show',
 checked: false,
 })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
document.forms用法示例介绍
Jun 26 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
微信小程序实现漂亮的弹窗效果
May 26 #Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 #Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 #Javascript
You might like
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php获取字段名示例分享
2014/03/03 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
JavaScript Eval 函数使用
2010/03/23 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
JS实现放大镜效果
2020/09/21 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
在python中创建指定大小的多维数组方式
2019/11/28 Python
为什么称python为胶水语言
2020/06/16 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python 进程池pool使用详解
2020/10/15 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
毕业自我鉴定
2013/11/05 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
内勤岗位职责
2015/02/10 职场文书
深入理解python协程
2021/06/15 Python
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript