微信小程序实现自定义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奇异的arguments分析
Oct 20 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
React-router4路由监听的实现
Aug 07 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
写一个Vue loading 插件
Nov 09 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php把session写入数据库示例
2014/02/26 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
实例浅析js的this
2016/12/11 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
物流管理专业大学生自荐信
2013/10/04 职场文书
个人教师自我评价范文
2013/12/02 职场文书
总经理秘书工作职责
2013/12/26 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
2014年法务工作总结
2014/12/11 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫