微信小程序自定义底部弹出框-组件

本文转载自查看原文 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下拉选项框组件微信小程序自定义组件的使用微信小程序组件自定义多选微信小程序中的自定义组件