微信小程序组件实现加载中效果

大家好哇，我是梦辛工作室的灵，我又来了=-=，最近项目开发中，需实现一个加载效果，上图给大家看下：

感觉一般把，还是挺好写的，我就封装成了一个组件，方便大家以后使用，使用方法如下：

<loading color="颜色值" times="动画时长" count="多少跟划线" class="load_img" ></loading>

还是简单吧，原理其实也很简单，就是 n个正方形（中间一根线）旋转后就变成了，然后再加上一个透明度的动画
下面是组件源代码：
loading.js

// components/loading/loading.js
Component({/*** 组件的属性列表*/properties: {color:{type:String,value:"#0600BD"},times:{type:Number,value:5},count:{type:Number,value:30}}, /*** 组件的初始数据*/data: {countlist:[]},observers:{"count": function(count_new){let countlist = new Array(count_new).fill(0);this.setData({countlist})}},/*** 组件的方法列表*/methods: {}
})

//loading.wxml

<!--components/loading/loading.wxml-->
<view wx:for="{{countlist}}" wx:key="count" class="content flex_row flex_hcenter" style="transform: rotate({{(360 / countlist.length) * index}}deg);"> <view class="line" style="background-color: {{color}};animation: colorset {{times}}s infinite {{(times * 1000/ countlist.length) * index}}ms;opacity: {{ 1 - (1/countlist.length) * index}};"></view>
</view>

loading.wxss

/* components/loading/loading.wxss */
.content{width: 100%;height: 100%; border-radius: 50%;position: absolute;
}.line{width: 2px;height: 16px;background: #ffffff;
}@keyframes colorset{from{opacity: 1;} to{opacity: 0;}
}.flex_row, .flex_column {display: flex;
}.flex_row {flex-direction: row;
}.flex_column {flex-direction: column;
}.flex_vcenter,.flex_center{align-items: center
}.flex_hcenter,.flex_center{justify-content: center;
}.flex_space{justify-content: space-between;
}
.flex_around{justify-content: space-around;
}
.flex_wrap{flex-wrap: wrap;
}
.flex_grow_1{flex-grow: 1;
}
.flex_end{align-items: flex-end;justify-content: flex-end;
}

收

微信小程序组件实现加载中效果相关推荐

微信小程序数据正在加载中的提示和隐藏？？？！！！
//微信小程序请求后台数据的时候显示正在加载方法将下面的写到你的函数里面 wx.showLoading({ title: '数据加载中...', }); ajax请求数据回来之后在 .then(r ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
微信小程序上拉加载流程
微信小程序上拉加载流程 1.首先需要在微信官方文档把scroll-view这个方法引入进来,然后使用这个方法,在样式里面写scroll-y,代表的是上下滑动,然后给滑动的盒子一个高度,100vh,然后 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors

微信小程序组件实现加载中效果

微信小程序组件实现加载中效果相关推荐

最新文章

热门文章

微信小程序组件 实现加载中效果

微信小程序组件 实现加载中效果相关推荐

最新文章

热门文章

微信小程序组件实现加载中效果

微信小程序组件实现加载中效果相关推荐