微信小程序实现当前页面点击指定文字图片弹出弹窗,再点击空白处消失

微信小程序实现当前页面点击指定文字图片弹出弹窗,再点击空白处消失
在制作微信小程序的时候,我们不免要实现弹窗功能,在当前页面弹出,再在当前页面点击空白处弹窗消失,可要如何实现呢?

例如制作效果
未点击前:

点击后:(点击问号,随之蹦出弹窗解释)

在点击其他地方时,弹窗将会消失。恢复到最开始的样子


实现的依据就是事件的非冒泡
事件以及冒泡事件
实现的思想就是蒙层添加点击隐藏事件,然后为蒙层子节点的设置阻止冒泡的事件。

wxml页面

<view class="main" bindtap="back">  //关键点
  <view class="header">
    <view class="header-left" catchtap="eduBulletFrame">点击这里  //关键点
      <text class="iconfont icon-wenhao" catchtap="eduBulletFrame"></text>
    </view>
    <view class="explanation" wx:if="{{ifBulletFrame}}" catchtap="eduBulletFrame">  //关键点
      <image src="../../img/background.png" class="explanationImg"></image>
      <text class="explanationText">这里有一个ACE,名字叫孟佳。</text>
    </view>
    <view class="header-right" hidden="{{ifBulletFrame}}">详情
    </view>
  </view>
</view>

js

 eduBulletFrame(e) {
    let ifBulletFrame = this.data.ifBulletFrame   //控制显示的参数
    if (ifBulletFrame == false) {
      this.setData({
        ifBulletFrame: true,
      })
    } else {
      this.setData({
        ifBulletFrame: false
      })
    }
  },

  //退出页面
  back(e) {
    this.setData({
      ifBulletFrame: false,
    })
  },

具体思路如下:

添加控制显示点击事件。首先使用catchtap 在你需要点击的地方添加,使用他来阻止外层事件的发生,不会触发大盒子上面的事件;再在你弹窗的地方使用wx:if(或者是hidden都可以),根据上面的catchtap事件使用参数控制是否显示;
添加点击其他地方弹窗消失点击事件。在最外面的大盒子上面使用bindtap,只要你点击这个里面的地方都会触发这个事件,而达到返回的目的。
最终显示效果:

在这里插入图片描述
原文链接:https://blog.csdn.net/weixin_44520823/article/details/112253477

 

事件绑定和冒泡
事件绑定的写法同组件的属性,以 key、value 的形式。

key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。

value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中,点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
    <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
</view>
Page({
    handleTap1:function(event){  //点击输出outer view bindtap
      console.log("outer view bindtap")
    },
    handleTap2: function (event) {  //点击输出middle view
      console.log("middle view catchtap")
    },
    handleTap3: function (event) {  //点击输出inner view bindtap  middle view catchtap
      console.log("inner view bindtap")
    },
})
<view id="outer" bindtap="handleTap1">  	
        outer view    
    <view id="middle" bindtap="handleTap2">    
        middle view    
    <view id="inner" bindtap="handleTap3">      
        inner view    
    </view>
</view>
 Page({    
 handleTap1:function(event){  
     //点击输出outer view bindtap      
     console.log("outer view bindtap")    
 },    
 handleTap2: function (event) {  
     //点击输出outer view bindtap middle view      
     console.log("middle view catchtap")    
 },   
 handleTap3: function (event) {  
     //点击输出outer view bindtap inner view bindtap  middle view catchtap      
     console.log("inner view bindtap")    
 },}
 )

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序中可以使用 wx.showModal 或 wx.prompt 来在当前页面弹出一个弹窗,让用户输入数据。 使用 wx.showModal 时可以设置模态框的标题、内容和按钮文字,当用户点击确定或取消按钮时会返回一个对象,其中 confirm 属性表示用户是否点击了确定按钮,cancel 属性表示用户是否点击了取消按钮。 示例: ``` wx.showModal({ title: '提示', content: '这是一个模态弹窗', success (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) ``` wx.prompt 方法可以设置标题和默认值,当用户点击确定或取消按钮时会返回一个对象,其中 confirm 属性表示用户是否点击了确定按钮,cancel 属性表示用户是否点击了取消按钮,value 属性表示用户输入的值。 示例: ``` wx.prompt({ title: '输入框', defaultValue: '默认值', success (res) { if (res.confirm) { console.log(res.value) } else if (res.cancel) { console.log('用户点击取消') } } }) ``` 希望这能解决你的问题. ### 回答2: 微信小程序点击按钮在当前页面弹出一个弹窗输入数据的实现可以通过以下步骤完成: 1. 在小程序的wxml文件中定义一个按钮组件,例如: ```html <button bindtap="showPopup">点击弹窗输入数据</button> ``` 2. 在小程序的js文件中编写showPopup函数,该函数用于显示弹窗: ```javascript Page({ showPopup: function () { wx.showModal({ title: '请输入数据', content: '', success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }) }, }) ``` 3. 在showModal函数内,调用微信小程序的showModal方法,该方法可以显示一个模态弹窗。 参数title指定弹窗的标题,content可以设置弹窗的输入框中的初始文本内容。 在success回调函数中,可以处理用户点击确定按钮的操作。 以上就是实现微信小程序点击按钮在当前页面弹出一个弹窗输入数据的简单示例。 通过以上代码,我们可以在点击按钮后,弹出一个模态窗口供用户输入数据。用户点击确定按钮后,我们可以在success回调函数中处理用户输入的数据。 ### 回答3: 微信小程序是一种轻量级的应用程序,用户可以在微信内直接使用。其中的按钮是常见的交互元素,用于触发事件。在点击按钮时,在当前页面弹出一个弹窗输入数据的功能可以通过以下步骤实现。 首先,需要在页面中添加一个按钮元素,并为按钮绑定一个点击事件。例如: ```html <button bindtap="showModal">点击我输入数据</button> ``` 接下来,在页面的对应的js文件中,定义一个名为showModal的函数来处理按钮的点击事件,并在该函数中调用微信小程序的API来显示弹窗。例如: ```javascript // pages/index/index.js Page({ showModal: function () { wx.showModal({ title: '请输入数据', content: '这是一个输入框', success: function (res) { if (res.confirm) { console.log('用户点击确定') // 在这里可以处理用户输入的数据 } else if (res.cancel) { console.log('用户点击取消') // 可以进行一些取消操作 } } }) } }) ``` 在showModal函数中,我们使用了微信小程序的showModal API,该API可以显示一个模态对话框,其中包括一个标题和内容,并提供确定和取消按钮供用户选择。 当用户点击确定按钮时,通过处理success回调函数中的逻辑,可以获取用户在弹窗中输入的数据,并进行相应的处理。当用户点击取消按钮时,可以执行一些取消操作。 通过以上步骤,我们可以实现微信小程序中,点击按钮,在当前页面弹出一个弹窗输入数据的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值