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

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

(0)

相关推荐

  • 微信小程序自定义toast弹窗效果的实现代码

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

  • 微信小程序带动画弹窗组件使用方法详解

    本文实例为大家分享了微信小程序带动画弹窗的具体代码,供大家参考,具体内容如下 基本效果如下: 具体实现如下: 第一步: 新建一个 components 文件夹,用于存放我们以后开发中的所用组件,在 components 组件中新建一个popup文件夹来存放我们的弹窗组件,在popup下右击新建 Component 并命名为 popup 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时项目结构应该如下图所示: 第二步上代码: popup.wxml

  • 微信小程序自定义弹窗实现详解(可通用)

    本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗 点击弹窗布局外消失弹窗 弹出弹窗时背景阴影半透明 各方向弹出效果(本文为自下而上弹出) 话不多说,先上图看效果: 点击昵称旁边的编辑按钮 弹出自定义弹窗 上图是我自己拙劣的审美自定义的一个编辑弹窗,因为重点是自定义弹窗,所以在下文的通用代码中我就去掉了这些布局,剩下填充部分由读者自行填充. 下面上代码,老规矩,还是微信小程序对应的几个文件的代码,可直接贴到页面里用的哦. .wxml 文件中 直接放到wxml的最底部就行了,十分简练.

  • 微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序用户授权弹窗 拒绝时引导用户重新授权实现

    前言 我们在开发小程序时,如果想获取用户信息,就需要获取用的授权,如果用户误点了拒绝授权,我们怎么样去正确的引导用户重新授权呢.今天就来给大家讲讲如果正确的引导用户授权. 老规矩,先看效果图 从上图可以看出,我们在用户点击拒绝授权时,我们会弹出一个提示框,提示用户去设置页重新授权,当用户去授权页重新授权以后,我们再回到首页,点击获取用户信息时,就可以成功的获取到用户信息了. 如下图蓝色框里,就是我们成功的获取的用户信息.   一,我们获取用户信息的时候需要用户授权 我们点击获取用户信息时,通常会

  • 微信小程序日历弹窗选择器代码实例

    应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进! 先上一个效果图:(当天日期为2018-4-18) 时间改为5月份的效果图: 直接上代码: wxml: <view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'> <view class="weui-cell weui-cell_access&qu

  • 微信小程序实战之自定义模态弹窗(8)

    首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&

  • 微信小程序常用的3种提示弹窗实现详解

    1. 表示操作成功,文字上方会显示一个表示操作成功的图标. wx.showToast({ title: '操作成功!', // 标题 icon: 'success', // 图标类型,默认success duration: 1500 // 提示窗停留时间,默认1500ms }) 2.表示加载中,显示为加载中图标. wx.showToast({ title: '加载中...', icon: 'loading', duration: 1500 }) 3.不显示图标,一般用作提示. wx.showTo

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

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo

  • 微信小程序封装自定义弹窗的实现代码

    最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

  • 微信小程序实现自定义弹窗组件的示例代码

    目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx

  • 微信小程序tabBar自定义弹窗遮挡不住解决技巧

    目录 背景 方法一:自定义tabbar 方法二:套用原生提供的tabbar自定义功能,嵌套自己的tabbar组件 总结 成果 背景 最近开发微信小程序发现一个问题,就是微信小程序官方自带的tabbar层级很高,自定义modal盖不住tabbar的问题:翻阅官方的社区,很多同学说 设置z-index:99999:可以解决这个问题,我实践下来是有问题的:ios是解决不了问题:经过反复实践有两种方法可以解决问题: 方法一:自定义tabbar 这个方法就是完全放弃微信官方的tabbar:自己用SPA的方

  • 微信小程序三级联动地址选择器的实例代码

    本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

  • 微信小程序当前时间时段选择器插件使用方法详解

    本文实例为大家分享了微信小程序当前时间时段选择器的实现代码,供大家参考,具体内容如下 DEMO效果图 插件思路 准备工作 获取当前时间,同时获取当前的年.月.日.周几: 创建处理日期数字的函数: 创建格式化日期的函数: 创建获取某月天数的函数: 创建获取季度开始的月份函数. 获取时段 创建获取当天的时段函数: 创建获取本周的时段函数: 创建获取本月的时段函数: 创建获取本季度的时段函数: 创建获取本年的时段函数: 创建自定义时段函数. 准备阶段的JS constructor() { this.n

  • 微信小程序实现多列选择器

    本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"    value="{{multiIndex}}" range=&quo

  • 微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx

  • 微信小程序之自定义组件的实现代码(附源码)

    最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件. 附上效果图: step1:创建文件并申明 与创建微信小程序的页面一样,一个自定义组件也需要json,wxml,wxss,js四个文件. 在项目根目录中创建文件夹,取名为:component,在该目录下继续创建文件夹successModal. 可以在开发工具中右键创建,选择component,默认自动会创建四个文件.如图: 在succes

随机推荐