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

最新推荐文章于 2025-06-24 16:12:44 发布

会飞的蜗牛905

最新推荐文章于 2025-06-24 16:12:44 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序学习之旅文章标签：小程序自定义对话框 dialog 微信弹出

本文链接：https://blog.youkuaiyun.com/qq__1358521215/article/details/75274840

小程序学习之旅专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现自定义弹出对话框的方法。通过编写特定的WXML和JS代码，实现了带有选项和操作按钮的对话框，为用户提供更丰富的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，需要在小程序里做一个弹出对话框的操作，微信提供的 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>

<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>

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();
    }
  }