微信小程序-弹出自定义对话框

最近，需要在小程序里做一个弹出对话框的操作，微信提供的 showmodal 也达不到我想要的效果，于是自己尝试。。。

如图：

大神看了莫喷，希望能帮助到刚入门的小伙伴。。。

代码：

wxml：

<view class="title"><view class="title1" bindtap="title"><image src="../images/bar_icon_jiaoshi@2x.png"></image></view><view class="title2" bindtap="title"><view class="title2_1"><text>{{title1}}</text></view><view class="title2_2"><text>{{title2}}</text><image src="../images/icon11@2x.png"></image></view></view>
</view>

<!--<template name="dialog"> --> <view hidden="{{h1}}" style="background:white;border:0.1rpx solid #ededed; width:70%;height:72%;border-radius:2%;"> <view style="display:flex;flex-direction:row-reverse;height:60rpx;"> <view bindtap="close"
style="width:40rpx;height:40rpx;border-radius:50%;background:#ccced0;color:white;margin:15rpx 15rpx;"> <text>×</text> </view> </view> <view style="display:flex;justify-content:center;height:55rpx;align-items:center;"> <text>教师资格证</text> </view> <view style="margin-top:15rpx;">
<block wx:for="{{content}}" wx:key="text"> <view wx:if="{{currentTab==item.id}}"> <view bindtap="choose" data-id="{{item.id}}" style="height:80rpx;display:flex;border-bottom:0.1rpx solid #e5e5e5;font-size:28rpx;align-items:center; justify-content:space-between;padding:0
30rpx;"> <text>{{item.text}}</text> <image src="{{img}}" style="width:50rpx;height:50rpx;"></image> </view> </view> <view wx:else> <view bindtap="choose" data-id="{{item.id}}" style="height:80rpx;display:flex;border-bottom:0.1rpx solid #e5e5e5;font-size:28rpx;align-items:center;
justify-content:space-between;padding:0 30rpx;"> <text>{{item.text}}</text> <image src="{{item.images}}" style="width:50rpx;height:50rpx;"></image> </view> </view> </block> <view wx:if="{{currentTab==7}}"> <view bindtap="choose" data-id="7" style="height:80rpx;display:flex;font-size:28rpx;align-items:center;
justify-content:space-between;padding:0 30rpx;"> <text>中职实习指导</text> <image src="{{img}}" style="width:50rpx;height:50rpx;"></image> </view> </view> <view wx:else> <view bindtap="choose" data-id="7" style="height:80rpx;display:flex;font-size:28rpx;align-items:center;
justify-content:space-between;padding:0 30rpx;"> <text>中职实习指导</text> <image src="{{img_1}}" style="width:50rpx;height:50rpx;"></image> </view> </view> </view> <view bindtap="sure" style="display:flex;justify-content:center;align-items:center;margin-top:30rpx;">
<text style="display:flex;justify-content:center;align-items:center;border:0.1rpx orange solid;color:orange; font-size:32rpx;width:150rpx;height:50rpx;border-radius:5%;">确定</text> </view> </view> <!--</template>-->


JS：

data :{windowHeight: '',h1: true,currentTab: 1,img: '../images/home_icon_seclet@2x.png',img_1: '../images/icon05@2x.png',content: [{id: 1,text: '幼儿园',images: '../images/icon05@2x.png'}, {id: 2,text: '小学',images: '../images/icon05@2x.png'}, {id: 3,text: '初级中学',images: '../images/icon05@2x.png'}, {id: 4,text: '高级中学',images: '../images/icon05@2x.png'}, {id: 5,text: '中职文化课',images: '../images/icon05@2x.png'}, {id: 6,text: '中职专业课',images: '../images/icon05@2x.png'}],title1: '',title2: ''
},
choose: function (e) {var that = this;var id = e.currentTarget.dataset.id;console.log('id=' + id);var dialog = that.data.dialog;dialog.currentTab = idthat.setData({ dialog: dialog })},close: function () {var that = this;var dialog = that.data.dialog;dialog.h1 = true;this.setData({ dialog: dialog })},sure: function () {var that = this;var dialog = that.data.dialogvar id = dialog.currentTabvar data = that.data.datafor (var i = 0; i < dialog.content.length; i++) {if (id == dialog.content[i].id) {data.title2 = dialog.content[i].textthat.setData({ data: data })}}if (id == 7) {data.title2 = '中职专业指导'that.setData({ data: data })}that.close()},
title: function () {console.log('title')var dialog = this.data.dialogdialog.h1 = falsethis.setData({ dialog: dialog })},onLoad: function () {console.log('onLoad')var that = thisthat.data.title1 = '教师资格证'that.data.title2 = '幼儿园'that.setData({ data: data })try {var res = wx.getSystemInfoSync()console.log(res.windowHeight)that.setData({ windowWidth: res.windowWidth, windowHeight: res.windowHeight });} catch (e) {that.onLoad();}}

微信小程序-弹出自定义对话框相关推荐

QT TextEdit设置背景、明文加密、弹出网站、弹出自定义对话框、gif动态图片、程序启动动画、打包程序、关闭事件
TextEdit设置背景前提必须已添加了资源图片铭文加密 ui->passLineEdit->setEchoMode(QLineEdit::Password); 弹出网站 #inclu ...
c语言弹出文本框,微信小程序弹出文本输入框
你应该用点击详情.了解更多! 详情史蒂芬孙 2018-12-19 00:54 0评论 0赞同在微信平台下开发小程序,接口输出的数据应该一致,如果是ios不一致,也应该由基础库去实现详情 Sac ...
微信小程序——弹出并隐藏键盘（带有输入框，可编辑）
点击按钮唤起键盘并且键盘上带有输入框,点击发送或者空白处可将输入的内容发送到指定的顶部输入框,不理解的可以私聊本人哦!!! 1.编辑好静态文件 .HTML文件 <!-- 点击需要编辑的输入框,& ...
微信小程序-模板的定义和使用
WeChat小程序交流(QQ群:769977169) 模板定义时,主要是指定模板名称,如name="template":且在使用时指定模板名称,如is="template ...
微信小程序弹出用户授权弹窗，微信小程序引导用户授权，获取位置经纬度
我们在开发小程序时,有些操作必须让用户授权.比如我们获取用户位置,需要用户授权位置信息.授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限.我们这里就以获取经纬度为 ...
微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...
WXML 将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false WXSS Page 设置为绝对定位,宽高各百分 ...
微信小程序弹出软键盘
<input focus="auto"/> input组件里的focus属性设置为"auto"自动获取焦点,使得输入框获取焦点时自动弹出软键盘. 当 ...
微信小程序全局变量的定义、使用、修改
1.全局变量的定义找到根目录下的app.js 在app.js内定义全局变量 //app.js App({//定义全局变量globalData:{name:"狂徒张三",tel:& ...
小程序中input标签没有反应_解决微信小程序弹出层中input无法聚焦的问题
此处使用的是vant框架解决聚焦问题这里遇到的问题是,在点击搜索框后,设置了弹起的弹出层中van-search的foucs值为true 但是没有起到聚焦效果原因在于弹出框带有一个动画效果,需要在 ...

微信小程序-弹出自定义对话框

微信小程序-弹出自定义对话框相关推荐

最新文章

热门文章