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

 更新时间:2018年07月09日 12:03:38   作者:吴姝璇   我要评论
这篇文章主要为大家详细介绍了微信小程序实现自定义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,
 })
 },
})

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

相关文章

  • 鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

    鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代

    这篇文章主要介绍了鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS+CSS实现的经典tab选项卡效果代码

    JS+CSS实现的经典tab选项卡效果代码

    这篇文章主要介绍了JS+CSS实现的经典tab选项卡效果代码,通过简单的鼠标事件触发js函数实现针对页面元素的遍历与样式变换功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • p5.js临摹旋转爱心

    p5.js临摹旋转爱心

    这篇文章主要为大家详细介绍了p5.js临摹旋转爱心,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JavaScript之Getters和Setters 平台支持等详细介绍

    JavaScript之Getters和Setters 平台支持等详细介绍

    现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters
    2012-12-12
  • javascript级联下拉列表实例代码(自写)

    javascript级联下拉列表实例代码(自写)

    javascript下拉菜单想必大家在浏览网页的时候都会看到吧,已不是那么陌生了,本文介绍使用javascript实现级联下拉列表实例,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-05-05
  • Javascript 引擎工作机制详解

    Javascript 引擎工作机制详解

    我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念需要的朋友可以参考下
    2016-11-11
  • 微信小程序iBeacon测距及稳定程序的实现解析

    微信小程序iBeacon测距及稳定程序的实现解析

    这篇文章主要介绍了微信小程序iBeacon测距及稳定程序的实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • form表单中去掉默认的enter键提交并绑定js方法实现代码

    form表单中去掉默认的enter键提交并绑定js方法实现代码

    form表单中默认的enter提交是不是让你已经很耐烦了吧,本文主要讲解一下如何去掉默认的enter键提交同时绑定js方法,感兴趣的朋友可以参考下哈
    2013-04-04
  • Bootstrap3 内联单选和多选框

    Bootstrap3 内联单选和多选框

    这篇文章主要介绍了Bootstrap3 内联单选和多选框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • 从parcel.js打包出错到选择nvm的全部过程

    从parcel.js打包出错到选择nvm的全部过程

    这篇文章主要介绍了从parcel.js打包出错到选择nvm的全部过程,需要的朋友可以参考下
    2018-01-01

最新评论