微信小程序 —— 自定义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.idvar that = thisthat.setData({id:id})},onLoad: function (options) {var that = thisthat.setData({value:'show'})},radioChange: function (e) {console.log('radio发生change事件，携带value值为：', e.detail.value)var that = thisthat.setData({value: e.detail.value})console.log(this.data.value)},toggleDialog() {this.setData({showDialog: !this.data.showDialog});},freeBack:function(){var that = thisif(this.data.value=='show'){wx.showModal({title: '提示',content: '你没有选择任何内容',})}that.setData({showDialog: !this.data.showDialog})},freetoBack: function () {var that = thiswx.showModal({title: '提示',content: '你没有选择任何内容',})that.setData({showDialog: !this.data.showDialog,value:'show',checked: false,})},
})

微信小程序 —— 自定义picker选择器弹窗内容相关推荐

微信小程序-自定义picker选择器
github地址为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据 ...
小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联 ...
小程序picker标题_微信小程序实现自定义picker选择器弹窗内容
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml 选 ...
微信小程序自定义picker多列选择器
需求说明使用 mpvue 实现自定义的 picker 多列选择器. 1.数据结构说明根据 picker 的数据特征,需要构造一个如下所示的数据结构.data数组中的三个元素,分别用于渲染 pick ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
微信小程序之picker选择器获取值得两种方法
想要实现的效果: 在选择器选择合适的选项后,页面显示所选择的内容第一种方法: //wxml页面 <picker bindchange="PickerChange" valu ...
微信小程序自定义滚动选择器
最近项目里有个需求要做个滚动选择器,在网上找了半天也没找到合适的demo,没办法只能发挥我的聪明才智创造一个,不哔哔上代码. js: // pages/xuanzeqi/xuanzeqi.js Pag ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...

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

微信小程序 —— 自定义picker选择器弹窗内容相关推荐

最新文章

热门文章