微信小程序--首页加载界面demo

效果图

代码

wxml

<!-- loading.wxml -->
<view class="loading"><view class="dot" animation="{{alpha[0]}}"></view><view class="dot" animation="{{alpha[1]}}"></view><view class="dot" animation="{{alpha[2]}}"></view><view class="dot" animation="{{alpha[3]}}"></view><view class="dot" animation="{{alpha[4]}}"></view>
</view>

wxss

page{background-image: url(https://wx1.sinaimg.cn/mw690/006cV2kkly1g8yh51dwplj30yi22on16.jpg);background-size: cover;
}/** loading.wxss **/
.loading {width: 100%;position: absolute;bottom: 150rpx;justify-content: center;text-align: center;
}.loading .dot{background-color:aquamarine;display: inline-block;/**圆点大小在这里设置，高宽一致，圆角值为高宽的一半**/width: 16rpx;height: 16rpx;border-radius: 8rpx;margin: 0 10rpx;opacity: 0;
}

/* loading.js */
Page({data: {alpha: [1, 1, 1, 1, 1]},onLoad: function () {var self = this;var _index = 0;var _alpha = self.data.alpha;var _speed = 500;var timer = setInterval(function () {var an_show = wx.createAnimation({});var an_hide = wx.createAnimation({});an_show.opacity(1).step({ duration: _speed });an_hide.opacity(0).step({ duration: _speed });_alpha[_index] = an_show;_alpha[_index == 0 ? 4 : _index - 1] = an_hide;self.setData({alpha: _alpha})_index = _index == 4 ? 0 : _index + 1;}, _speed);}
})

微信小程序--首页加载界面demo相关推荐

微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
微信小程序image加载成功前显示默认占位图
在微信小程序中,我们使用Image组件来展示图片,图片源可以是本地资源,也可以是服务器资源.但是为了内容的动态展示,我们绝大多数情况下,会使用服务器资源来展现作为image的图片源.既然是服务器资源, ...
微信小程序重新加载当前页面
在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...

微信小程序--首页加载界面demo

效果图

代码

微信小程序--首页加载界面demo相关推荐

最新文章

热门文章