1、创建 components >> drop >> loading.js、loading.json、loading.wxml、loading.wxss
loading.js：
// components/loading/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否开启下拉加载 不开启可以用作初始化加载动画
drop: {
type: Boolean,
value: true
},
// 是否开启遮罩 防止点击穿透
shade: {
type: Boolean,
value: true
},
// 加载提示语
msg: {
type: String,
value: '玩命加载中'
},
// 加载、关闭
load: {
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
loading:false,
touchDotX:0,// X按下时坐标
touchDotY:0,// Y按下时坐标
scrollTop:0,// 页面滑动距离
transition:0,// 动画时间
tmY:0,// 下滑距离
top:-40,// 组件位置
rotate:0// 旋转
},
observers: {
// 监听加载命令
'load': function(load) {
if (load) {
this.setData({
top:-40, // 初始化 再延时1毫秒 让动画能够加载
transition:0.4 // 设置动画时间
})
var _this = this;
// 延迟执行 完成动画
setTimeout(function(){
_this.loading()
},1)
} else {
this.hideLoading()
}
}
},
/**
* 组件的方法列表
*/
methods: {
// 触摸开始事件
touchStart: function(e) {
if (this.data.drop) {
this.setData({
loading:false,
touchDotX:e.touches[0].pageX, // 获取触摸时的原点
touchDotY:e.touches[0].pageY,
top:-40,
tmY:0,
rotate:0
})
}
},
// 页面滑动事件
touchScroll: function(e) {
if (this.data.drop) {
this.setData({
scrollTop:e.detail.scrollTop
})
}
},
// 触摸移动事件
touchMove: function (e) {
if (this.data.drop) {
let tmX = e.touches[0].pageX - this.data.touchDotX;
let tmY = e.touches[0].pageY - this.data.touchDotY;
this.setData({
top:tmY,
tmY:tmY,
rotate:tmY*2<360?tmY*2:360,
})
}
},
// 触摸结束事件
touchEnd: function(e) {
if (this.data.drop) {
let tmX = e.changedTouches[0].pageX - this.data.touchDotX;
let tmY = e.changedTouches[0].pageY - this.data.touchDotY;
let top = this.data.top;
let stop= this.data.scrollTop;
// 判断说明
// tmY 向下滑动距离大于指定距离触发加载
// top 执行scroll时 top无变化 只有当页面scroll为0，再下拉时，top变化 防止页面scroll时也触发加载
// stop 页面没有scroll，就是必须页面触顶再下拉才触发
if (tmY > 80&&top > 0&&stop == 0) {
this.setData({
transition:0.8
})
this.loading()
this.triggerEvent("loading")
} else {
if (tmY > 0) {
this.hideLoading()
}
}
}
},
// 加载关闭
hideLoading: function () {
var _this = this;
this.setData({
transition:0.8,
tmY: 0,
top:-40
})
// 延迟关闭 完成动画
setTimeout(function(){
_this.setData({
transition:0,
loading:false
})
},750)
},
// 加载
loading: function () {
this.setData({
loading:true,
tmY: 0,
top:80
})
}
}
})
loading.json:
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}
loading.wxml:
<!-- 加载中动画 -->
<view class="drop-loading">
<!-- 旋转插件 -->
<view class="box" style="transform:rotate({{rotate}}deg);top: {{top}}px;transition: top {{transition}}s;">
<!-- gif -->
<image class="icon" src="{{loading?'/images/loading.gif':'/images/loading.png'}}"></image>
</view>
<!-- 加载消息 -->
<view class="msg" style="top: {{top+40}}px;transition: top {{transition}}s;">{{loading&&top>0?msg:top>79&&tmY>79?'松开刷新':''}}</view>
</view>
<!-- 遮罩防误触控 -->
<view class="drop-loading-shade" wx:if="{{shade&&loading}}"></view>
<!-- 页面滚动 -->
<scroll-view scroll-y="true" throttle="{{false}}" style="height: 100vh;" bindtouchstart="touchStart" catchtouchmove="touchMove" bindscroll="touchScroll" bindtouchend="touchEnd">
<!-- 页面元素 -->
<slot></slot>
</scroll-view>
loading.wxss:
.drop-loading {
position: fixed;
width: 100vw;
height: 100rpx;
top: -85rpx;
display: flex;
justify-content: center;
z-index: 99999999999999;
}
.drop-loading-shade {
position: fixed;
width: 100vw;
height: 100vh;
padding-top: 100px;
z-index: 999999999999;
}
.drop-loading .box {
background-color: #fff;
box-shadow: 1rpx 1rpx 8rpx #999;
border-radius: 50%;
width: 80rpx;
height: 80rpx;
position: absolute;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.drop-loading .msg {
position: absolute;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 24rpx;
color: #999;
}
.drop-loading .box .icon{
width: 80rpx;
height: 80rpx;
}
方法：
{
"usingComponents": {
"loading": "/components/drop/loading"
},
"navigationBarTitleText": "云商贴"
}
页面代码：
<!-- loading 页面变量 修改loading控制加载开启/关闭 quary就是加载方法，需要在这个方法完成时修改loading为false结束加载动画 -->
<loading load="{{loading}}" bind:loading="quary">
<view style="height: 120vh;">
这里是自己的代码
</view>
这里是自己的代码
</loading>
