微信小程序自定义底部、顶部、中间、左边、右边弹窗
简单的微信小程序弹窗功能，具体实现过程，请浏览代码。
顶部弹出窗图例：
中间弹出窗图例：
底部弹出窗图例：
左边弹出窗图例：
右边弹出窗图例：
- 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。
