微信小程序弹窗

微信小程序自定义底部、顶部、中间、左边、右边弹窗
简单的微信小程序弹窗功能，具体实现过程，请浏览代码。

顶部弹出窗图例：

中间弹出窗图例：

底部弹出窗图例：

左边弹出窗图例：

右边弹出窗图例：

1. wxml代码

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