微信小程序实现签到弹窗动画

本文实例为大家分享了微信小程序实现签到弹窗的具体代码，供大家参考，具体内容如下

效果图如下所示

图片素材：

.wxml

<button bindtap="popup">签到</button>
<view class="load" style="{{sign?'':'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:-1;'}}">
 <image class="loadingpic" src="/images/light.png"></image>
 <image class="load-imagae" src="/images/register.png"></image>
 <view class="load-centent">
 <view>签到成功</view>
 <view>获得0积分</view>
 <view bindtap="popup">好的</view>
 </view>
</view>

.wxss

page{
 background-color: #ccc;
}
view{
 box-sizing: border-box;
}
button{
 margin-top: 50rpx;
}
.load{
 width: 80%;
 height: 600rpx;
 position: fixed;
 top:calc((100vh - 800rpx)/2);
 left: 10%;
 transition: all 0.3s ease-in-out 0s;
 -webkit-transition: all 0.3s ease-in-out 0s;
 opacity: 1;
 z-index: 10;
}
.loadingpic {
 width: 100%;
 height: 93%;
 position: absolute;
 animation: load 3s linear 1s infinite;
 z-index: 10;
 margin-top: 7%;
}
@keyframes load{
 0%{
 webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100%{
 webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
.load-imagae{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: absolute;
 z-index: 11;
}
.load-centent{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: relative;
 z-index: 12;
 text-align: center;
 padding: 25% 10% 5% 10%;
}
.load-centent>view:nth-child(1){
 font-size: 34rpx;
 color: #fff;
}
.load-centent>view:nth-child(2){
 color: #fff;
 opacity: 0.7;
 margin: 20rpx 0;
 font-size: 24rpx;
}
.load-centent>view:nth-child(3){
 width: 85%;
 margin: 30rpx 7.5% 0 7.5%;
 height: 70rpx;
 line-height: 70rpx;
 border-radius: 40rpx;
 background-color: #F8D168;
 color: #EB4331;
 font-size: 30rpx;
}

.js

Page({
 data: {
 sign:false,
 },
 popup:function(e){
 this.setData({
  sign:!this.data.sign
 })
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序本地存储实现每日签到、连续签到功能

    昨天在看自己写的小程序项目,无意中打开了CSDN APP,突然间觉得,我去,如果在小程序中加个"签到"功能,岂不美哉!(好吧,其实是买的书昨天没到货,然后闲着无事,就想起了大明湖畔的"签到") 但是吧,又不想写和服务器交互的,本着"简单点"的原则,我想起了曾经的挚爱-- 本地存储 . 先说说相关注意吧: 其一就是 storage中只能存放字符串! 我去,昨晚大部分时间都是在搞这个.以前一直认为存放的是对象,兴致勃勃写完发现点击以后出现了"

  • 微信小程序连续签到7天积分获得功能的示例代码

    每周每天签到获得积分的案例 功能设计:计算每天签到得1分,显示得到的签到积分,连续签到3天[周一二三]即得+多3分,连续签到7天[周一二三四五六日]+多7分,没有连续即不显示多余的3分或7分的提示- wxml结构: <!--pages/signIn2/signIn2.wxml--> <view class='sign-new'> <view class='in'> <view class='new-head'> <view class='sig-tl'

  • 微信小程序实现打卡签到页面

    本文实例为大家分享了微信小程序实现打卡签到页面的具体代码,供大家参考,具体内容如下 效果图如下所示 .wxml <view class='gs_banner'> <view class='gs_continue'> <view>每日坚持签到</view> <view>总共签到:<text>{{continuity}}</text>天</view> </view> </view> <

  • 微信小程序实现签到功能

    本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下 效果图: 今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日期 如:["16", "14"] 点击签到执行 calendarSign sign.wxml <!--index.wxml--> <view class="calendar"> <view class='bcfff'> <view class=&q

  • 微信小程序以7天为周期连续签到7天功能效果的示例代码

    此功能以1,2,3,4,5,6,7这样为一周期,连续签到的功能: 通过计算是否为整除7天计算,每7天后切换数目,从而改变周期表. 本案例只是提供案例的基本操作,进一步涉及:每日用户集的监听(日历表,签到统计,连续签到,签到中断,后端数据处理)等等功能需自行在搞掂哈~ 如果图如下: wxml结构 <!--pages/signIn/signIn.wxml--> <view class='signIn'> <view class='sign-com'> <view cl

  • 微信小程序签到功能

    微信小程序签到功能

    本文实例为大家分享了简易微信小程序签到功能的具体代码,供大家参考,具体内容如下 一.效果图 点击签到后 二.数据库 用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用户id和签到日期的数据,如下图 三.后端 后端写两个接口,一个用于查询用户今日是否签到和签到记录总数,一个用于添加用户签到信息到数据库.这里用的是python的flask框架. (1)查询用户签到信息接口: @app.route('/get_sign/<user_id>') def get_sign(user_i

  • 微信小程序实现二维码签到考勤系统

    一.手动生成二维码的.js代码 这里要引入一个官方文档wxapp.qrcode.min.js let drawQrcode = require('../utils/wxapp.qrcode.min.js');//引入wxapp.qrcode.min.js文件 createQRcode(canvasWidth, canvasHeight, canvasId, url) { // 调用qrcode.js里的方法,传入对应参数 drawQrcode({ width: canvasWidth, heig

  • 使用python实现微信小程序自动签到功能

    功能描述目标 完成多账号微信小程序每天自动签到 输出 签到成功则向微信群发送签到成功的信息 否则提示用户签到失败,需手动签到 包管理 requests itchat time threading 程序的结构设计步骤1 获取要发送的json数据:地址 步骤2 向服务器发送请求 步骤3 根据服服务器响应判断签到是否完成 步骤4 微信交互 代码实现使用findler抓包工具查看请求类型 https://reserve.25team.com/wxappv1/yi/index?version=13 可以看

  • 微信小程序实现日历签到

    近日做了一个项目需要用到日历插件,在网上找了一部分感觉跟项目不对口,所以就查考了其他的日历插件做了一个. 需求: 如图: 代码如下: index.wxml: <!--pages/pictruesign/pictrue.wxml--> <view class='gs_banner'> <image src='../../image/banner.jpg'></image> <view class='gs_continue'> <view>

  • 微信小程序实现打卡日历功能

    生活中有各种可以打卡的app,例如背单词打卡什么的,本人觉得很有意思,于是本人在大二时做了一款诚信状打卡的微信小程序,这里讲述一下编写的过程. 先说一下开发环境:用的是微信web开发工具开发的,后台采用了Bmob后台,比较方便. 先展示一下成果: 话不多说,直接上代码,里面也有挺多的注释,以防自己忘记,当然各位如果直接复制过去肯定不能有当前的效果,注意后台数据的交互,不过做一个界面还是没有问题的. Calendar.wxml 页面文件 页面上显示出来的东西,布局上主要是一个年月栏.上一个月和下一

随机推荐