微信小程序弹窗

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

顶部弹出窗图例：

中间弹出窗图例：

底部弹出窗图例：

左边弹出窗图例：

右边弹出窗图例：

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>

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

3. 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。