微信小程序自定义底部、顶部、中间、左边及右边弹窗

更新时间：2023年11月22日 09:49:16 作者：三脚猫的喵

这篇文章主要给大家介绍了关于微信小程序自定义底部、顶部、中间、左边及右边弹窗的相关资料,弹窗是小程序中非常重要的一种互动方式,比如用户注册时错误提示、优惠券领取提示、签到成功提示等等,需要的朋友可以参考下

微信小程序自定义底部、顶部、中间、左边、右边弹窗

简单的微信小程序弹窗功能，具体实现过程，请浏览代码。

点击事件

顶部弹出窗图例：

页面顶部弹出

中间弹出窗图例：

中部弹窗

底部弹出窗图例：

底部弹窗

左边弹出窗图例：

左边弹出

右边弹出窗图例：

右边弹出

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>

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%;
}

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。

总结

到此这篇关于微信小程序自定义底部、顶部、中间、左边及右边弹窗的文章就介绍到这了,更多相关微信小程序弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决小程序无法触发SESSION问题
这篇文章主要介绍了解决小程序无法触发SESSION问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options、某一项option以及动态添加select中的项option，在IE和FireFox都能测试成功，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
JavaScript.The.Good.Parts阅读笔记（一）假值与===运算符
JavaScript 假值与===运算符，学习js的朋友可以看下。
2010-11-11
[HTML/CSS/Javascript]WWTJS
[HTML/CSS/Javascript]WWTJS...
2007-09-09
JavaScript实现左右滚动电影画布
这篇文章主要为大家详细介绍了JavaScript实现左右滚动电影画布，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
pjblog中的UBBCode.js
pjblog中的UBBCode.js...
2007-04-04
纯JS半透明Tip效果代码
自己根据网上提供的一个透明功能类库写的纯JS半透明Tip效果
2008-10-10
js中的bigint类型转化为json字符串时报无法序列化的问题
JSON序列化指将JSON对象转换为JSON字符串,J实现方式有两种：一种是调用JSON对象内置的stringify()函数,一种是为对象自定义toJSON()函数,本文重点介绍js中的bigint类型转化为json字符串时报无法序列化的问题,感兴趣的朋友一起看看吧
2024-01-01
js 中获取制定的cook信息实现方法
下面小编就为大家带来一篇js 中获取制定的cook信息实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
在页面加载之后执行JavaScript
这篇文章主要介绍了在页面加载之后执行JavaScript的详细过程，本文通过实例代码文字解说给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-06-06

微信小程序自定义底部、顶部、中间、左边及右边弹窗

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具