微信小程序-彈出自定義對話框

最近，需要在小程序裏做一個彈出對話框的操作，微信提供的 showmodal 也達不到我想要的效果，於是自己嘗試。。。

如圖：

大神看了莫噴，希望能幫助到剛入門的小夥伴。。。

代碼 ：

wxml：

<view class="title">
  <view class="title1" bindtap="title">
    <image src="../images/[email protected]"></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/[email protected]"></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/[email protected]',
      img_1: '../images/[email protected]',
      content: [{
        id: 1,
        text: '幼兒園',
        images: '../images/[email protected]'
      }, {
        id: 2,
        text: '小學',
        images: '../images/[email protected]'
      }, {
        id: 3,
        text: '初級中學',
        images: '../images/[email protected]'
      }, {
        id: 4,
        text: '高級中學',
        images: '../images/[email protected]'
      }, {
        id: 5,
        text: '中職文化課',
        images: '../images/[email protected]'
      }, {
        id: 6,
        text: '中職專業課',
        images: '../images/[email protected]'
      }],
     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();
    }
  }