微信小程序自定義底部彈出框-組件

本文轉載自查看原文 2020-11-15 21:43 916 微信

轉載自：https://blog.csdn.net/weixin_45727040/article/details/106715697 (若有侵權，請聯系刪除)

component目錄下：popup為組件
pages目錄下：bottom為要加入組件的頁面
(具體效果展示在底部）

1.首先寫組件popup
popup.wxml

 1 <view class="half-screen">
 2   <!--屏幕背景變暗的背景  -->
 3   <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 4   <!--彈出框  -->
 5   <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
 6     <image class="back" src="../../assets/back.png" bindtap="hideModal"></image>
 7     <view class="ctTitle">{{title}}</view>
 8     <view class="thresholdBtn">
 9       <button id="yes" class="confirm" size="mini" type="primary" bindtap="hideModal">確定</button>
10     </view>
11   </view>
12 </view>

View Code

popup.wxss

 1 /*使屏幕變暗  */
 2 .background_screen {
 3   width: 100%;
 4   height: 100%;
 5   position: fixed;
 6   top: 0;
 7   left: 0;
 8   background: #000;
 9   opacity: 0.2;
10   overflow: hidden;
11   z-index: 1000;
12   color: #fff;
13 }
14 /*對話框 */
15 .attr_box {
16   height: 230px;
17   width: 100%;
18   overflow: hidden;
19   position: fixed; 
20   bottom: 0;
21   left: 0;
22   z-index: 2000;
23   background: #fff;
24   padding-top: 20px;
25 }
26 .attr_box .back {
27   margin-top: -30px;
28   height: 20px;
29   width: 20px;
30 }
31 .attr_box .ctTitle{
32   margin-top: -30px;
33   margin-left: 120px; 
34 }
35 .thresholdBtn .confirm{
36   margin-bottom: -180px;
37   height: 30px;
38   width: 80px;
39   margin-left: 120px;
40 }

View Code

popup.js

 1 Component({
 2   /**
 3    * 組件的屬性列表
 4    */
 5   properties: {
 6     title: {
 7       type: String,
 8       value: '標題'
 9     }
10   },
11 
12   /**
13    * 組件的初始數據
14    */
15   data: {
16     //彈窗顯示控制 
17     showModalStatus: false
18   },
19   /**
20    * 組件的方法列表
21    */
22   methods: {
23     //點擊顯示底部彈出
24     changeRange: function () {
25       this.showModal();
26     },
27 
28     //底部彈出框
29     showModal: function () {
30       // 背景遮罩層
31       var animation = wx.createAnimation({
32         duration: 200,
33         timingFunction: "linear",
34         delay: 0
35       })
36       //this.animation = animation
37       animation.translateY(300).step()
38       this.setData({
39         animationData: animation.export(),
40         showModalStatus: true
41       })
42       setTimeout(function () {
43         animation.translateY(0).step()
44         this.setData({
45           animationData: animation.export()
46         })
47       }.bind(this), 200)
48     },
49    
50     //點擊背景面任意一處時，彈出框隱藏
51     hideModal: function () {
52       //彈出框消失動畫
53       var animation = wx.createAnimation({
54         duration: 200,
55         timingFunction: "linear",
56         delay: 0
57       })
58       //this.animation = animation
59       animation.translateY(300).step()
60       this.setData({
61         animationData: animation.export(),
62       })
63       setTimeout(function () {
64         animation.translateY(0).step()
65         this.setData({
66           animationData: animation.export(),
67           showModalStatus: false
68         })
69       }.bind(this), 200)
70     },
71   }
72 })

View Code

2.然后是主頁面
bottom.json

1 {
2   "usingComponents": {
3     "popup": "/components/popup/popup"
4   }
5 }

View Code

bottom.wxml

1 <view bindtap="changeRange">請點擊</view>
2 <popup id='popup' title='我是標題'></popup>

View Code

bottom.js

1 Page({
2   onReady: function(){
3     this.popup= this.selectComponent("#popup");
4   },
5   changeRange(){
6     this.popup.changeRange();
7   }
8 })

View Code

效果圖

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序之自定義底部彈出框動畫微信小程序之動畫 —— 自定義底部彈出層微信小程序自定義底部導航欄組件+跳轉微信小程序自定義組件——底部菜單欄 ActionSheet 微信小程序-自定義底部導航微信小程序如何自定義底部導航微信小程序之自定義select下拉選項框組件微信小程序自定義組件的使用微信小程序組件自定義多選微信小程序中的自定義組件