微信小程序实现淡入淡出效果(页面跳转)
//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写
<!--wxml-->
<!--蒙版(渐出淡去效果)-->
<view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view> <!--正式内容(渐入加深效果)-->
<view class="container log-list" style='opacity: {{1-opacity}};'>
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view> <!--wxss-->
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
.aa{
background-color: darkcyan;
}
//xx.js
const util = require('../../utils/util.js')
//把winHeight设为常量,不要放在data里(一般来说不用于渲染的数据都不能放在data里)
const winHeight = wx.getSystemInfoSync().windowHeight Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
winH: wx.getSystemInfoSync().windowHeight,
opacity: 1,
//这个是微信官方给的获取logs的方法 看了收益匪浅
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
},
onShow: function () {
this.hide()
},
//核心方法,线程与setData
hide: function () {
var vm = this
var interval = setInterval(function () {
if (vm.data.winH > 0) {
//清除interval 如果不清除interval会一直往上加
clearInterval(interval)
vm.setData({ winH: vm.data.winH - 5, opacity: vm.data.winH / winHeight })
vm.hide()
}
}, 10);
}
})
以前这种就是渐变效果
微信小程序实现淡入淡出效果(页面跳转)的更多相关文章
- 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面
如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',}) 不起作用,需要使用 w ...
- 微信小程序开发(四)页面跳转
承接上篇博客. 通过点击按钮跳转到新的页面. 先创建新页面home: 代码如下: // home.js Page({}) // 注册页面 // home.json {} // home.wxml &l ...
- 微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题
想要的效果 1.第一页只显示第一道题的内容,如图红框2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml <!--pages/answer/answer.wxml--&g ...
- 微信小程序把玩(五)页面生命周期
原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...
- 微信小程序--ajax服务器交互及页面渲染
网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...
- 微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
随机推荐
- 阿里云ECS升级OpenSSL记录
1.下载OpenSSL wget https://www.openssl.org/source/openssl-1.1.0e.tar.gz 2.解压编译安装 tar xf openssl-1.1.0e ...
- vue基础学习(三)
03-01 vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...
- maven 打包Could not resolve dependencies for project和无效的目标发行版: 1.8
1.maven 打包Could not resolve dependencies for project 最近项目上使用的是idea ide的多模块话,需要模块之间的依赖,比如说系统管理模块依赖授权模 ...
- MIG IP控制DDR3读写测试
本文设计思想采用明德扬至简设计法.在高速信号处理场合下,很短时间内就要缓存大量的数据,这时片内存储资源已经远远不够了.DDR SDRAM因其极高的性价比几乎是每一款中高档FPGA开发板的首选外部存储芯 ...
- vim 当前用户显示行号
在 -/.vimrc 中添加 set nu 如果文件不存在可以直接新建这个文件 -表示当前用户的主目录
- Q:java中serialVersionUID的作用
@转载自:http://www.cnblogs.com/guanghuiqq/archive/2012/07/18/2597036.html 简单来说,Java的序列化机制是通过在运行时判断类的s ...
- 微信小程序参数二维码6问6答
微信小程序参数二维码[基础知识篇],从6个常见问题了解小程序参数二维码的入门知识. 1.什么是小程序参数码? 微信小程序参数二维码:针对小程序特定页面,设定相应参数值,用户扫描后进入相应的页面. 2. ...
- Head First设计模式之桥接模式
一.定义 桥接模式(Bridge Pattern),将抽象部分与它的实现部分分离,使的抽象和实现都可以独立地变化. 主要解决:在多维可能会变化的情况下,用继承会造成类爆炸问题,扩展起来不灵活. 何时使 ...
- python模块:shelve
shelve 1)模块功能:以 key - value 的方式存储数据. 2)写数据 >>> import shelve >>> db = shelve.open( ...
- Micropython教程之TPYBoard制作蓝牙+红外循迹小车
1.实验目的 学习在PC机系统中扩展简单I/O接口的方法. 进一步学习编制数据输出程序的设计方法. 学习蓝牙模块的接线方法及其工作原理. 学习L298N电机驱动板模块的接线方法. 学习蓝牙控制小车的工 ...