微信扫码登录

其他登录方式

绑定手机号

注册

我同意用户协议

忘记密码

用户协议

绑定手机号

近期有不法分子打着爱盈利的旗号,制作“爱盈利”名称的App,并伪造爱盈利证件,骗取用户信任,以抖音点赞赚钱或其他方式赚钱为名义,过程中以升级会员获得高佣金为名让用户充值。
爱盈利公司郑重声明:我司没有研发或运营过任何名为“爱盈利”的APP,我司做任务赚钱类产品从没有让任何普通用户充值升级会员。我公司产品均在本网站可查询,请将网站拉至底部,点击“关于我们”可查看爱盈利相关产品与服务。
温馨提示:当遇到此类问题请拨打官方电话或添加官方微信,以免财产损失。爱盈利官网地址:www.aiyingli.com。
  • 推广与合作
X

小程序丨教你:如何使用微信小程序开发一个弹窗页面(附源码)

来源: 13722
教你小程序系列教程:
1.教你:微信小程序如何实现scroll-view隐藏滚动条
2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码)
3.教你:小程序如何使用swiper组件实现图片切换(附源码)
4.教你:微信小程序中如何设置拨打电话(附源码)
5.教你:如何打开小程序如何打开微信自带的地图(附源码) 

6. 教你:如何使用小程序画布组件绘制自动缩放正方形(附源码)
7. 教你:如何使用微信小程序video组件播放视频(附源码)
8. 教你:如何使用小程序画布组件绘制一个会自动旋转正方形
9、教你:如何使用微信小程序开发一个弹窗页面(附源码)

在小程序的开发过程中,我们肯定会遇到开发一个弹窗页面的情况,我们先看一下小程序官方对于弹窗页面的解释。API的接口如下
教你:如何使用微信小程序开发一个弹窗页面(附源码)

从官方给出的代码示例来看,想当简单,就像一个asert,并不能看出弹窗的真实需求。所以今天HTML51.COM就写了一个弹窗小程序教程,供大家学习参考。
首页我们先看一下动态的效果图:
教你:如何使用微信小程序开发一个弹窗页面(附源码)
我们首先看到的是首页代码:
<view class="copyright">

    <view class="copyright_item">CopyRight:All Right Reserved</view>

    <view class="copyright_item">原创作者:51小程序</view>

    <view class="copyright_item">微信小程序开发者社区</view>

    <view class="copyright_item">HTML51.COM</view>

    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>

    <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入弹窗演示页面</button></view>

</view>

当然了,重点不在于此。
index.wxml的代码如下:
<!--使用animation属性指定需要执行的动画-->  

<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  

  

  <!--drawer content-->  

  <view class="drawer_title">弹窗标题</view>  

  <view class="drawer_content">  

    <view class="top grid">  

      <label class="title col-0">标题</label>  

      <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>  

    </view>  

    <view class="top grid">  

      <label class="title col-0">标题</label>  

      <input class="input_base input_h30 col-1" name="mobile" value="110"></input>  

    </view>  

    <view class="top grid">  

      <label class="title col-0">标题</label>  

      <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>  

    </view>  

    <view class="top grid">  

      <label class="title col-0">标题</label>  

      <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>  

    </view>  

    <view class="top bottom grid">  

      <label class="title col-0">备注</label>  

      <input class="input_base input_h30 col-1" name="bz"></input>  

    </view>  

  </view>  

  <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>  

</view>  


index.wxss的代码如下:
.btn {  

  width: 80%;  

  padding: 20rpx 0;  

  border-radius: 10rpx;  

  text-align: center;  

  margin: 40rpx 10%;  

  background: #000;  

  color: #fff;  

}  

  

/*mask*/  

.drawer_screen {  

  width: 100%;  

  height: 100%;  

  position: fixed;  

  top: 0;  

  left: 0;  

  z-index: 1000;  

  background: #000;  

  opacity: 0.5;  

  overflow: hidden;  

}  

  

/*content*/  

.drawer_box {  

  width: 650rpx;  

  overflow: hidden;  

  position: fixed;  

  top: 50%;  

  left: 0;  

  z-index: 1001;  

  background: #FAFAFA;  

  margin: -150px 50rpx 0 50rpx;  

  border-radius: 3px;  

}  

  

.drawer_title{  

  padding:15px;  

  font: 20px "microsoft yahei";  

  text-align: center;  

}  

.drawer_content {  

  height: 210px;  

  overflow-y: scroll; /*超出父盒子高度可滚动*/  

}  

  

.btn_ok{  

  padding: 10px;  

  font: 20px "microsoft yahei";  

  text-align: center;  

  border-top: 1px solid #E8E8EA;  

  color: #3CC51F;  

}  

  

.top{  

    padding-top:8px;  

}  

.bottom {  

    padding-bottom:8px;  

}  

.title {  

    height: 30px;  

    line-height: 30px;  

    width: 160rpx;  

    text-align: center;  

    display: inline-block;  

    font: 300 28rpx/30px "microsoft yahei";  

}  

  

.input_base {  

    border: 2rpx solid #ccc;  

    padding-left: 10rpx;  

    margin-right: 50rpx;  

}  

.input_h30{  

    height: 30px;  

    line-height: 30px;  

}  

.input_h60{  

    height: 60px;  

}  

.input_view{  

    font: 12px "microsoft yahei";  

    background: #fff;  

    color:#000;  

    line-height: 30px;  

}  

  

input {  

    font: 12px "microsoft yahei";  

    background: #fff;  

    color:#000 ;  

}  

radio{  

    margin-right: 20px;  

}  

.grid { display: -webkit-box; display: box; }  

.col-0 {-webkit-box-flex:0;box-flex:0;}  

.col-1 {-webkit-box-flex:1;box-flex:1;}  

.fl { float: left;}  

.fr { float: right;}  


index.js的代码如下:
Page({  

  data: {  

    showModalStatus: false  

  },  

  powerDrawer: function (e) {  

    var currentStatu = e.currentTarget.dataset.statu;  

    this.util(currentStatu)  

  },  

  util: function(currentStatu){  

    /* 动画部分 */  

    // 第1步:创建动画实例   

    var animation = wx.createAnimation({  

      duration: 200,  //动画时长  

      timingFunction: "linear", //线性  

      delay: 0  //0则不延迟  

    });  

      

    // 第2步:这个动画实例赋给当前的动画实例  

    this.animation = animation;  

  

    // 第3步:执行第一组动画  

    animation.opacity(0).rotateX(-100).step();  

  

    // 第4步:导出动画对象赋给数据对象储存  

    this.setData({  

      animationData: animation.export()  

    })  

      

    // 第5步:设置定时器到指定时候后,执行第二组动画  

    setTimeout(function () {  

      // 执行第二组动画  

      animation.opacity(1).rotateX(0).step();  

      // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象  

      this.setData({  

        animationData: animation  

      })  

        

      //关闭  

      if (currentStatu == "close") {  

        this.setData(  

          {  

            showModalStatus: false  

          }  

        );  

      }  

    }.bind(this), 200)  

    

    // 显示  

    if (currentStatu == "open") {  

      this.setData(  

        {  

          showModalStatus: true  

        }  

      );  

    }  

  }  

  

})  

弹窗实例小程源码如下:
教你:如何使用微信小程序开发一个弹窗页面(附源码)tanchuang.rar
爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。

评论

相关文章推荐

SELECT dw_posts.ID,dw_posts.post_title,dw_posts.post_content FROM dw_posts INNER JOIN dw_term_relationships ON (dw_posts.ID = dw_term_relationships.object_id) WHERE 1=1 AND(dw_term_relationships.term_taxonomy_id = 5246 ) AND dw_posts.post_type = 'post' AND (dw_posts.post_status = 'publish') GROUP BY dw_posts.ID ORDER BY RAND() LIMIT 0, 6

京ICP备15063977号-2 © 2012-2018 aiyingli.com. All Rights Reserved. 京公网安备 11010102003938号