微信小程序picker怎么自动弹框,不手动点击触发,怎么自动弹框
1条回答 默认 最新
- 代码的灵魂是bug! 2019-10-10 18:07关注
定义变量控制,要实现这种效果就不能用微信自带的,需要自定义,下面我分段贴码:
布局:<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>
样式:
.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:
data: { showDialog: true,//此变量就是用来控制显示和隐藏,当满足条件时为true 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, }) },
解决 3无用
悬赏问题
- ¥100 Jenkins自动化部署—悬赏100元
- ¥15 关于#python#的问题:求帮写python代码
- ¥20 MATLAB画图图形出现上下震荡的线条
- ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
- ¥15 perl MISA分析p3_in脚本出错
- ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
- ¥15 ubuntu虚拟机打包apk错误
- ¥199 rust编程架构设计的方案 有偿
- ¥15 回答4f系统的像差计算
- ¥15 java如何提取出pdf里的文字?