微信小程序弹窗

置顶 已于 2022-11-19 00:38:32 修改
阅读量1.7w 收藏 267
点赞数 60
分类专栏： 微信小程序 文章标签： 微信小程序 javascript 前端
于 2022-11-19 00:29:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45465881/article/details/127931495
版权

微信小程序自定义底部、顶部、中间、左边、右边弹窗
简单的微信小程序弹窗功能，具体实现过程，请浏览代码。
点击事件
顶部弹出窗图例：
页面顶部弹出
中间弹出窗图例：
中部弹窗
底部弹出窗图例：
底部弹窗
左边弹出窗图例：
左边弹出
右边弹出窗图例：
右边弹出

  1. wxml代码
<button type="primary" bindtap="openPopup" data-index="0">打开顶部弹窗</button>
<button type="primary" bindtap="openPopup" data-index="1">打开中间弹窗</button>
<button type="primary" bindtap="openPopup" data-index="2">打开底部弹窗</button>
<button type="primary" bindtap="openPopup" data-index="3">打开左边弹窗</button>
<button type="primary" bindtap="openPopup" data-index="4">打开右边弹窗</button>
<!-- 顶部弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='0'}}" bindtap="closePopup"></view> 
<view class="info-top" wx:if="{{showIndex=='0'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    <view>无边落木萧萧下，不尽长江滚滚来。</view>
    <view>万里悲秋常作客，百年多病独登台。</view>
    <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">确认</view>
  </view>
</view>
<!-- 中间弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='1'}}" bindtap="closePopup"></view> 
<view class="info-center" style="top:{{height*0.3}}px;height:{{height*0.4}}px;"
wx:if="{{showIndex=='1'}}">
  <view>
    <view class="row-info">
      <view>
        <text class="line left-line"></text>
        <text>《登高》</text>
        <text class="line right-line"></text>
      </view>
      <view class="row-author">杜甫 〔唐代〕</view>
      <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
      <view>无边落木萧萧下，不尽长江滚滚来。</view>
      <view>万里悲秋常作客，百年多病独登台。</view>
      <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
    </view>
    <view class="row-btn">
      <view class="left-btn" bindtap="closePopup">取消</view>
      <view class="right-btn">确认</view>
    </view>
  </view>
</view>
<!-- 底部弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='2'}}" bindtap="closePopup"></view> 
<view class="info-bottom" wx:if="{{showIndex=='2'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    <view>无边落木萧萧下，不尽长江滚滚来。</view>
    <view>万里悲秋常作客，百年多病独登台。</view>
    <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">确认</view>
  </view>
</view>

<!-- 左边弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='3'}}" bindtap="closePopup"></view> 
<view class="info-left" wx:if="{{showIndex=='3'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>风急天高猿啸哀，</view>
    <view>渚清沙白鸟飞回。</view>
    <view>无边落木萧萧下，</view>
    <view>不尽长江滚滚来。</view>
    <view>万里悲秋常作客，</view>
    <view>百年多病独登台。</view>
    <view>艰难苦恨繁霜鬓，</view>
    <view>潦倒新停浊酒杯。</view>
  </view>
  <view class="row-btn fixed">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">确认</view>
  </view>
</view>
<!-- 右边弹窗 -->
<view class="popup-box" wx:if="{{showIndex=='4'}}" bindtap="closePopup"></view> 
<view class="info-right" wx:if="{{showIndex=='4'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>风急天高猿啸哀，</view>
    <view>渚清沙白鸟飞回。</view>
    <view>无边落木萧萧下，</view>
    <view>不尽长江滚滚来。</view>
    <view>万里悲秋常作客，</view>
    <view>百年多病独登台。</view>
    <view>艰难苦恨繁霜鬓，</view>
    <view>潦倒新停浊酒杯。</view>
  </view>
  <view class="row-btn fixed">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">确认</view>
  </view>
</view>
  1. wxss代码
/* 蒙层 */
.popup-box{
  position: absolute;
  z-index: 99;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
/* 上 */
.info-top{
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  background-color: white;
  border-bottom-left-radius: 5rpx;
  border-bottom-right-radius: 5rpx;
}
/* 中 */
.info-center{
  position: fixed;
  z-index: 999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
/* 下 */
.info-bottom{
  position: fixed;
  z-index: 999;
  width: 100%;
  bottom: 0;
  background-color: white;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}
/* 左 */
.info-left{
  position: fixed;
  z-index: 999;
  width: 50%;
  height: 100%;
  top: 0;
  background-color: white;
  border-top-right-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}
/* 右 */
.info-right{
  position: fixed;
  z-index: 999;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: white;
  border-top-left-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
}
/* 自定义内容（根据自己需求更改,可删除） */
button{
  margin: 15rpx 0;
}
.row-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15rpx;
  font-size: 32rpx;
}
.row-info view{
  padding: 10rpx 0;
}
.row-info view:first-child{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.line{
  width: 100rpx;
  height: 1rpx;
}
.left-line{
  background-image: linear-gradient(to left,orange,white);
}
.right-line{
  background-image: linear-gradient(to right,orange,white);
}
.row-author{
  font-size: 24rpx;
  color: gray;
}
.row-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1rpx dashed #f1f1f1;
}
.row-btn view{
  flex: 1;
  text-align: center;
  margin: 20rpx 10%;
  padding: 12rpx 0;
  font-size: 32rpx;
  border-radius: 10rpx;
}
.left-btn{
  background-color: #f1f1f1;
  color: #33ccff;
}
.right-btn{
  background-color: #33ccff;
  color: white;
}
.fixed{
  position: fixed;
  bottom: 0;
  width: 50%;
}
  1. js代码
Page({
  /**
   * 页面的初始数据
   */
  data: {
    showIndex:null,//打开弹窗的对应下标
    height:'',//屏幕高度
  },
  // 打开弹窗
  openPopup(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      showIndex:index
    })
  },
  //关闭弹窗
  closePopup(){
    this.setData({
      showIndex:null
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    var that = this;
    // 动态获取屏幕高度
    wx.getSystemInfo({
      success: (result) => {
        that.setData({
          height: result.windowHeight
        });
      },
    })
  },
})

代码简洁，类型齐全。本人才疏学浅，代码仅供参考，如有问题，请多多指教，酸Q。

三脚猫的喵
关注
专栏目录
微信小程序开发—(五)弹出框
汉堡请不要欺负面条
05-02 13万+
消息提示框 模态弹窗 操作菜单 1.消息提示——wx.showToast(OBJECT) //show.js //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: '成功', icon: 'success', duration:
微信小程序实现漂亮的弹窗效果
01-03
最近项目里需要实现一个带着logo的美美哒弹窗，可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 场面一度十分尴尬 可是得做啊，要不然产品大姐又要暴走了…… 好吧，来研究一下模态对话框的性质自己DIY吧~ 实现思路 模态对话框之所以被叫做“模态”，就是因为在它弹出的时候，用户如果不关闭这个对话框，是无法对其他窗口进行操作的。 那么这样一来，我们的思路就很明确了： 1. 构建一个蒙层（mask），使得背景变暗，并且阻止用户对对话框外界面的这里写代码片点击事件； 2. 构建一个对话框，在需要时弹出即可（弹出同时触发蒙层）。 示例代码 .wxml： <view
微信小程序的四种弹窗使用
最新发布
weixin_73378557的博客
08-15 2990
总而言之，这四个能处理很少一部分弹窗效果 个人感觉，因为支持的方法太少了，前几天想找个支持照片跟文字的，尝试好久都不行，
小程序基本命令
aiven1637的博客
10-30 3327
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序弹窗模式
baidu_39228294的博客
02-05 783
小程序提示弹框是在小程序界面中弹出一个窗口给用户显示显示一些警告信息或者是提醒用户操作的结果。常用弹窗提示方法：
微信小程序之实现弹窗组件及点击弹窗按钮实现页面跳转
m0_59704905的博客
04-03 2784
校园二手书交易，不限品类，诚信标价，让校园二手书合理流通起来！！！卖书规则</button><button class="popup-button confirm-btn" bindtap="closePopup">开始卖书
微信小程序弹窗组件wxapp对话框组件
01-27
打开，'本地小程序项目 - 添加项目'，项目目录选择为 miniprogram_dev 目录 使用 安装 npm install --save wechat-miniprogram-dialog 每次引入或更新需先执行开发者工具的 npm 构建， 在你的页面json中添加 { ...
微信小程序 弹窗自定义实例代码
08-31
微信小程序弹窗自定义实例代码 微信小程序弹窗自定义实例代码是微信小程序开发中一个非常重要的知识点。弹窗是微信小程序中最常用的交互方式之一，用于提示用户重要信息、获取用户反馈或确认用户操作。然而，在实际...
微信小程序表单弹窗实例
10-18
微信小程序表单弹窗实例是一个能够展示给开发者如何在微信小程序中实现表单提交和处理数据弹窗的实用教程。它详细地介绍了如何使用微信小程序的WXML和JS代码编写，以及如何通过动画效果改善用户体验。接下来，我将...
微信小程序 弹窗输入组件的实现解析
10-16
微信小程序弹窗输入组件是一种在微信小程序开发过程中常用的组件，它能在用户交互过程中提供弹出层显示输入框的功能，以实现信息收集、数据录入等需求。实现这一功能，我们需要完成几个关键步骤：创建半透明遮罩层、...
微信小程序开发 遮罩层弹出框
04-03
微信小程序开发遮罩层弹出框的实现，简单实现，点击弹出遮罩，类似弹出框
微信小程序自定义精美弹窗
03-26
微信小程序自定义弹窗微信小程序自定义弹窗微信小程序自定义弹窗微信小程序自定义弹窗
小程序之页面弹窗
12-06
module页面传取，底部弹出视图，顶部提示，角标，商品数量加减
微信小程序日历弹窗选择器代码实例
10-17
从给出的内容来看，微信小程序日历弹窗选择器代码实例展示了如何通过WXML（微信小程序标记语言）、WXSS（微信小程序样式表）和JavaScript来构建一个日历弹窗选择器。WXML是用于描述页面结构的标记语言，类似于HTML，...
微信小程序：模态框（弹窗）的实现
weixin_46001736的博客
12-11 2186
微信小程序：模态框（弹窗）的实现
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三脚猫的喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值