├── README.md ├── app.js ├── app.json ├── app.wxss ├── pages ├── index │ ├── index.js │ ├── index.wxml │ └── index.wxss └── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # Modal-box 2 | 微信小程序 之『动画模态框』 3 | 4 | 在做用户登录的模块的时候参考了官方提供的模态弹窗这样的模态弹窗，充其量只能做个alert，提示一下信息。 5 | 但是并不能使用它来处理复杂性的弹窗业务，因此写了Modal从新自定义了一个，采用了仿原生的样式写法。 6 | 7 | [项目详情介绍](http://www.jianshu.com/p/ef538ae97543) 8 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | } 26 | }, 27 | globalData:{ 28 | userInfo:null 29 | } 30 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window":{ 7 | "backgroundTextStyle":"light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTitleText": "WeChat", 10 | "navigationBarTextStyle":"black" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .container { 4 | height: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: space-between; 9 | padding: 200rpx 0; 10 | box-sizing: border-box; 11 | } 12 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | showModalStatus: false 4 | }, 5 | powerDrawer: function (e) { 6 | 7 | var currentStatu = e.currentTarget.dataset.statu; 8 | this.util(currentStatu) 9 | }, 10 | 11 | binphone:function(e){ 12 | console.log(e.detail.value) 13 | 14 | }, 15 | 16 | binpassword:function(e){ 17 | console.log(e.detail.value) 18 | 19 | 20 | }, 21 | 22 | util: function (currentStatu) { 23 | /* 动画部分 */ 24 | // 第1步：创建动画实例 25 | var animation = wx.createAnimation({ 26 | duration: 200, //动画时长 27 | timingFunction: "linear", //线性 28 | delay: 0 //0则不延迟 29 | }); 30 | // 第2步：这个动画实例赋给当前的动画实例 31 | this.animation = animation; 32 | // 第3步：执行第一组动画 33 | animation.opacity(0).rotateX(-100).step(); 34 | // 第4步：导出动画对象赋给数据对象储存 35 | this.setData({ 36 | animationData: animation.export() 37 | }) 38 | // 第5步：设置定时器到指定时候后，执行第二组动画 39 | setTimeout(function () { 40 | // 执行第二组动画 41 | animation.opacity(1).rotateX(0).step(); 42 | // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 43 | this.setData({ 44 | animationData: animation 45 | }) 46 | 47 | 48 | 49 | 50 | 51 | //关闭 52 | if (currentStatu == "close") { 53 | this.setData( 54 | { 55 | showModalStatus: false 56 | } 57 | ); 58 | } 59 | }.bind(this), 200) 60 | 61 | // 显示 62 | if (currentStatu == "open") { 63 | this.setData( 64 | { 65 | showModalStatus: true 66 | } 67 | ); 68 | } 69 | } 70 | 71 | }) -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | button 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 用户登录 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 确定 24 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .btn { 2 | width: 80%; 3 | padding: 20rpx 0; 4 | border-radius: 10rpx; 5 | text-align: center; 6 | margin: 40rpx 10%; 7 | background: #000; 8 | color: #fff; 9 | } 10 | 11 | /*mask*/ 12 | .drawer_screen { 13 | width: 100%; 14 | height: 100%; 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | z-index: 1000; 19 | background: #000; 20 | opacity: 0.5; 21 | overflow: hidden; 22 | } 23 | 24 | /*content*/ 25 | .drawer_box { 26 | width: 650rpx; 27 | overflow: hidden; 28 | position: fixed; 29 | top: 50%; 30 | left: 0; 31 | z-index: 1001; 32 | background: #FFFFFF; 33 | margin: -150px 50rpx 0 50rpx; 34 | border-radius: 3px; 35 | } 36 | 37 | .drawer_title{ 38 | padding:15px; 39 | font: 20px "microsoft yahei"; 40 | text-align: center; 41 | } 42 | .drawer_content { 43 | height: 210rpx; 44 | overflow-y: scroll; /*超出父盒子高度可滚动*/ 45 | } 46 | 47 | .btn_ok{ 48 | padding: 10px; 49 | font: 20px "microsoft yahei"; 50 | text-align: center; 51 | border-top: 1px solid #E8E8EA; 52 | color: #3CC51F; 53 | } 54 | 55 | .top{ 56 | padding-top:8px; 57 | } 58 | .bottom { 59 | padding-bottom:8px; 60 | } 61 | .title { 62 | height: 30px; 63 | line-height: 30px; 64 | width: 160rpx; 65 | text-align: center; 66 | display: inline-block; 67 | font: 300 28rpx/30px "microsoft yahei"; 68 | } 69 | 70 | .input_base { 71 | border: 2rpx solid #ccc; 72 | padding-left: 10rpx; 73 | margin-right: 50rpx; 74 | } 75 | .input_h30{ 76 | height: 30px; 77 | line-height: 30px; 78 | } 79 | .input_h60{ 80 | height: 60px; 81 | } 82 | .input_view{ 83 | font: 12px "microsoft yahei"; 84 | background: #fff; 85 | color:#000; 86 | line-height: 30px; 87 | } 88 | 89 | input { 90 | font: 12px "microsoft yahei"; 91 | background: #fff; 92 | color:#000 ; 93 | } 94 | radio{ 95 | margin-right: 20px; 96 | } 97 | .grid { display: -webkit-box; display: box; } 98 | .col-0 {-webkit-box-flex:0;box-flex:0;} 99 | .col-1 {-webkit-box-flex:1;box-flex:1;} 100 | .fl { float: left;} 101 | .fr { float: right;} -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | --------------------------------------------------------------------------------