微信小程序实现底部、顶部、中间、左边、右边弹窗功能

gitbbs

WXML代码：

1. <button type="primary" bindtap="openPopup" data-index="0">打开顶部弹窗</button>
   
2. <button type="primary" bindtap="openPopup" data-index="1">打开中间弹窗</button>
   
3. <button type="primary" bindtap="openPopup" data-index="2">打开底部弹窗</button>
   
4. <button type="primary" bindtap="openPopup" data-index="3">打开左边弹窗</button>
   
5. <button type="primary" bindtap="openPopup" data-index="4">打开右边弹窗</button>
   
6. <!-- 顶部弹窗 -->
   
7. <view class="popup-box" wx:if="{{showIndex=='0'}}" bindtap="closePopup"></view>
   
8. <view class="info-top" wx:if="{{showIndex=='0'}}">
   
9.   <view class="row-info">
   
10.     <view>
    
11.       <text class="line left-line"></text>
    
12.       <text>《登高》</text>
    
13.       <text class="line right-line"></text>
    
14.     </view>
    
15.     <view class="row-author">杜甫 〔唐代〕</view>
    
16.     <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    
17.     <view>无边落木萧萧下，不尽长江滚滚来。</view>
    
18.     <view>万里悲秋常作客，百年多病独登台。</view>
    
19.     <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
    
20.   </view>
    
21.   <view class="row-btn">
    
22.     <view class="left-btn" bindtap="closePopup">取消</view>
    
23.     <view class="right-btn">确认</view>
    
24.   </view>
    
25. </view>
    
26. <!-- 中间弹窗 -->
    
27. <view class="popup-box" wx:if="{{showIndex=='1'}}" bindtap="closePopup"></view>
    
28. <view class="info-center" style="top:{{height*0.3}}px;height:{{height*0.4}}px;"
    
29. wx:if="{{showIndex=='1'}}">
    
30.   <view>
    
31.     <view class="row-info">
    
32.       <view>
    
33.         <text class="line left-line"></text>
    
34.         <text>《登高》</text>
    
35.         <text class="line right-line"></text>
    
36.       </view>
    
37.       <view class="row-author">杜甫 〔唐代〕</view>
    
38.       <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    
39.       <view>无边落木萧萧下，不尽长江滚滚来。</view>
    
40.       <view>万里悲秋常作客，百年多病独登台。</view>
    
41.       <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
    
42.     </view>
    
43.     <view class="row-btn">
    
44.       <view class="left-btn" bindtap="closePopup">取消</view>
    
45.       <view class="right-btn">确认</view>
    
46.     </view>
    
47.   </view>
    
48. </view>
    
49. <!-- 底部弹窗 -->
    
50. <view class="popup-box" wx:if="{{showIndex=='2'}}" bindtap="closePopup"></view>
    
51. <view class="info-bottom" wx:if="{{showIndex=='2'}}">
    
52.   <view class="row-info">
    
53.     <view>
    
54.       <text class="line left-line"></text>
    
55.       <text>《登高》</text>
    
56.       <text class="line right-line"></text>
    
57.     </view>
    
58.     <view class="row-author">杜甫 〔唐代〕</view>
    
59.     <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    
60.     <view>无边落木萧萧下，不尽长江滚滚来。</view>
    
61.     <view>万里悲秋常作客，百年多病独登台。</view>
    
62.     <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
    
63.   </view>
    
64.   <view class="row-btn">
    
65.     <view class="left-btn" bindtap="closePopup">取消</view>
    
66.     <view class="right-btn">确认</view>
    
67.   </view>
    
68. </view>
    
69. 
    
70. <!-- 左边弹窗 -->
    
71. <view class="popup-box" wx:if="{{showIndex=='3'}}" bindtap="closePopup"></view>
    
72. <view class="info-left" wx:if="{{showIndex=='3'}}">
    
73.   <view class="row-info">
    
74.     <view>
    
75.       <text class="line left-line"></text>
    
76.       <text>《登高》</text>
    
77.       <text class="line right-line"></text>
    
78.     </view>
    
79.     <view class="row-author">杜甫 〔唐代〕</view>
    
80.     <view>风急天高猿啸哀，</view>
    
81.     <view>渚清沙白鸟飞回。</view>
    
82.     <view>无边落木萧萧下，</view>
    
83.     <view>不尽长江滚滚来。</view>
    
84.     <view>万里悲秋常作客，</view>
    
85.     <view>百年多病独登台。</view>
    
86.     <view>艰难苦恨繁霜鬓，</view>
    
87.     <view>潦倒新停浊酒杯。</view>
    
88.   </view>
    
89.   <view class="row-btn fixed">
    
90.     <view class="left-btn" bindtap="closePopup">取消</view>
    
91.     <view class="right-btn">确认</view>
    
92.   </view>
    
93. </view>
    
94. <!-- 右边弹窗 -->
    
95. <view class="popup-box" wx:if="{{showIndex=='4'}}" bindtap="closePopup"></view>
    
96. <view class="info-right" wx:if="{{showIndex=='4'}}">
    
97.   <view class="row-info">
    
98.     <view>
    
99.       <text class="line left-line"></text>
    
100.       <text>《登高》</text>
     
101.       <text class="line right-line"></text>
     
102.     </view>
     
103.     <view class="row-author">杜甫 〔唐代〕</view>
     
104.     <view>风急天高猿啸哀，</view>
     
105.     <view>渚清沙白鸟飞回。</view>
     
106.     <view>无边落木萧萧下，</view>
     
107.     <view>不尽长江滚滚来。</view>
     
108.     <view>万里悲秋常作客，</view>
     
109.     <view>百年多病独登台。</view>
     
110.     <view>艰难苦恨繁霜鬓，</view>
     
111.     <view>潦倒新停浊酒杯。</view>
     
112.   </view>
     
113.   <view class="row-btn fixed">
     
114.     <view class="left-btn" bindtap="closePopup">取消</view>
     
115.     <view class="right-btn">确认</view>
     
116.   </view>
     
117. </view>
     

复制代码

WXCSS代码：

1. /* 蒙层 */
   
2. .popup-box{
   
3.   position: absolute;
   
4.   z-index: 99;
   
5.   top: 0;
   
6.   background-color: rgba(0, 0, 0, 0.5);
   
7.   width: 100%;
   
8.   height: 100%;
   
9. }
   
10. /* 上 */
    
11. .info-top{
    
12.   position: fixed;
    
13.   z-index: 999;
    
14.   width: 100%;
    
15.   top: 0;
    
16.   background-color: white;
    
17.   border-bottom-left-radius: 5rpx;
    
18.   border-bottom-right-radius: 5rpx;
    
19. }
    
20. /* 中 */
    
21. .info-center{
    
22.   position: fixed;
    
23.   z-index: 999;
    
24.   background-color: white;
    
25.   display: flex;
    
26.   align-items: center;
    
27.   justify-content: center;
    
28.   border-radius: 10rpx;
    
29.   width: 90%;
    
30.   margin-left: 5%;
    
31.   margin-right: 5%;
    
32. }
    
33. /* 下 */
    
34. .info-bottom{
    
35.   position: fixed;
    
36.   z-index: 999;
    
37.   width: 100%;
    
38.   bottom: 0;
    
39.   background-color: white;
    
40.   border-top-left-radius: 10rpx;
    
41.   border-top-right-radius: 10rpx;
    
42. }
    
43. /* 左 */
    
44. .info-left{
    
45.   position: fixed;
    
46.   z-index: 999;
    
47.   width: 50%;
    
48.   height: 100%;
    
49.   top: 0;
    
50.   background-color: white;
    
51.   border-top-right-radius: 10rpx;
    
52.   border-bottom-right-radius: 10rpx;
    
53. }
    
54. /* 右 */
    
55. .info-right{
    
56.   position: fixed;
    
57.   z-index: 999;
    
58.   width: 50%;
    
59.   height: 100%;
    
60.   right: 0;
    
61.   top: 0;
    
62.   background-color: white;
    
63.   border-top-left-radius: 10rpx;
    
64.   border-bottom-left-radius: 10rpx;
    
65. }
    
66. /* 自定义内容（根据自己需求更改,可删除） */
    
67. button{
    
68.   margin: 15rpx 0;
    
69. }
    
70. .row-info{
    
71.   display: flex;
    
72.   flex-direction: column;
    
73.   align-items: center;
    
74.   margin: 15rpx;
    
75.   font-size: 32rpx;
    
76. }
    
77. .row-info view{
    
78.   padding: 10rpx 0;
    
79. }
    
80. .row-info view:first-child{
    
81.   display: flex;
    
82.   flex-direction: row;
    
83.   align-items: center;
    
84. }
    
85. .line{
    
86.   width: 100rpx;
    
87.   height: 1rpx;
    
88. }
    
89. .left-line{
    
90.   background-image: linear-gradient(to left,orange,white);
    
91. }
    
92. .right-line{
    
93.   background-image: linear-gradient(to right,orange,white);
    
94. }
    
95. .row-author{
    
96.   font-size: 24rpx;
    
97.   color: gray;
    
98. }
    
99. .row-btn{
    
100.   display: flex;
     
101.   flex-direction: row;
     
102.   align-items: center;
     
103.   border-top: 1rpx dashed #f1f1f1;
     
104. }
     
105. .row-btn view{
     
106.   flex: 1;
     
107.   text-align: center;
     
108.   margin: 20rpx 10%;
     
109.   padding: 12rpx 0;
     
110.   font-size: 32rpx;
     
111.   border-radius: 10rpx;
     
112. }
     
113. .left-btn{
     
114.   background-color: #f1f1f1;
     
115.   color: #33ccff;
     
116. }
     
117. .right-btn{
     
118.   background-color: #33ccff;
     
119.   color: white;
     
120. }
     
121. .fixed{
     
122.   position: fixed;
     
123.   bottom: 0;
     
124.   width: 50%;
     
125. }
     

复制代码

WXJS代码：

1. Page({
   
2.   /**
   
3.    * 页面的初始数据
   
4.    */
   
5.   data: {
   
6.     showIndex:null,//打开弹窗的对应下标
   
7.     height:'',//屏幕高度
   
8.   },
   
9.   // 打开弹窗
   
10.   openPopup(e){
    
11.     var index = e.currentTarget.dataset.index;
    
12.     this.setData({
    
13.       showIndex:index
    
14.     })
    
15.   },
    
16.   //关闭弹窗
    
17.   closePopup(){
    
18.     this.setData({
    
19.       showIndex:null
    
20.     })
    
21.   },
    
22.   /**
    
23.    * 生命周期函数--监听页面初次渲染完成
    
24.    */
    
25.   onReady() {
    
26.     var that = this;
    
27.     // 动态获取屏幕高度
    
28.     wx.getSystemInfo({
    
29.       success: (result) => {
    
30.         that.setData({
    
31.           height: result.windowHeight
    
32.         });
    
33.       },
    
34.     })
    
35.   },
    
36. })
    

复制代码