最近,需要在小程序里做一个弹出对话框的操作,微信提供的 showmodal 也达不到我想要的效果,于是自己尝试。。。
如图:
大神看了莫喷,希望能帮助到刚入门的小伙伴。。。
代码 :
wxml:
<!--<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>--><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>
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 = id that.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.dialog var id = dialog.currentTab var data = that.data.data for (var i = 0; i < dialog.content.length; i++) { if (id == dialog.content[i].id) { data.title2 = dialog.content[i].text that.setData({ data: data }) } } if (id == 7) { data.title2 = '中职专业指导' that.setData({ data: data }) } that.close() }, title: function () { console.log('title') var dialog = this.data.dialog dialog.h1 = false this.setData({ dialog: dialog }) }, onLoad: function () { console.log('onLoad') var that = this that.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(); } }