文章展示了如何在微信小程序中创建一个自定义的加载组件load-line，包括线性、圆形和球形三种加载样式。组件使用了wxml和wxss来定义结构和样式，并通过JavaScript处理动态效果和属性。此外，还提供了父组件如何应用和配置该加载组件的示例。
组件部分代码
load-line.wxml文件
<view>
<view>
<!-- <view class="line" wx:if="{{loadType=='line'}}">
<view class="loadline jianbian" style="width:{{loadPercent}}%;"></view>
<view class="v-title">
<text class="fa fa-spinner fa-spin"></text>
{{loadText}}{{loadPercent}}%
</view>
</view>
<view class="circle" wx:if="loadType=='circle'">
<view class="third" style="background:{{circleInfo.background}}">
<view class="second" wx:if="loadPercent!=100" style="background:{{circleInfo.foreground}}"></view>
<view class="second_" style="transform: 'rotate('+(loadPercent>=50?((loadPercent-50)/100)*360:0)+'deg)';background:{{circleInfo.background}}"></view>
<view class="first" wx:if="{{loadPercent<50}}" :style="{transform: 'rotate('+(360*(loadPercent/100))+'deg)',background:circleInfo.foreground}"></view>
<view class="mask" :style="{background:circleInfo.circleColor}">
<text>{{loadPercent}}%</text>
</view>
</view>
</view> -->
<view class="ball" style="width:{{ballSize_+25}}px;height:{{ballSize_+25}}px;">
<view class="loading-ball" style="width:{{ballSize_}}px;height:{{ballSize_}}px;padding:{{ballInfo.ballPadding}}">
<view class="loading-wave" style="overflow:{{ballInfo.ballType=='all'?'initial':'hidden'}};width:{{ballSize_}}px;height:{{ballSize_}}px">
<view wx:if="{{loadPercent<100}}" class="loading-wave1" style="background:{{ballInfo.waveColor}};top:{{ballInfo.ballType=='all'?-(loadPercent*1.3)-3:-(loadPercent*1.2)-3}}%;width:{{ballSize_*2}}px;height:{{ballSize_*2}}px"></view>
<view wx:if="{{loadPercent<100}}" class="loading-wave2" style="background:{{ballInfo.waveColor}};top:{{ballInfo.ballType=='all'?-(loadPercent*1.3)-3:-(loadPercent*1.2)-3}}%;width:{{ballSize_*2}}px;height:{{ballSize_*2}}px"></view>
<view class="loading-text" style="line-height:{{ballSize_}}px">{{loadPercent}}分</view>
</view>
</view>
</view>
</view>
</view>
load-line.wxss文件
/* @import url("./css/font-awesome.min.css");
@import url("./css/loadline.css"); */
.jianbian {
background: linear-gradient(to right, #6ee2e1, #2ba98c, #a07e1e)
}
.line {
background-color: #fff;
color: #555;
border-radius: 8upx;
padding: 10px 15px;
overflow: hidden;
width: 85%;
margin: auto;
position: relative;
top: 200px;
}
.v-title {
width: 100%;
}
.loadline {
height: 2px;
}
/* 圆形 */
.circle {
position: absolute;
top: 300px;
width: 100%;
}
.third {
margin: auto;
width: 180px;
height: 180px;
border-radius: 50%;
position: relative;
}
.second {
width: 180px;
height: 180px;
border-radius: 50%;
clip: rect(0, 91px, auto, 0);
position: absolute;
}
.second_ {
width: 180px;
height: 180px;
border-radius: 50%;
clip: rect(0, auto, auto, 90px);
}
.first {
width: 180px;
height: 180px;
border-radius: 50%;
clip: rect(0, auto, auto, 90px);
}
/* .third{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
} */
.mask {
width: 80%;
height: 80%;
border-radius: 50%;
margin: auto;
box-shadow: -2px -2px 4px rgba(0, 0, 0, .5) inset, 2px 2px 4px rgba(0, 0, 0, .5) inset;
z-index: 10;
}
/* .mask>text{
display: block;
color: white;
line-height: 145px;
text-align: center;
} */
/* 球形 */
.ball {
position: absolute;
overflow: hidden;
/* left: 20%;
top: 20%; */
/* margin: auto; */
/* padding-top: 200px; */
}
.loading-ball {
border-radius: 50%;
border: 2px solid #68d466;
overflow: hidden;
/* position: relative; */
/* z-index: 100; */
}
.loading-wave {
position: absolute;
border-radius: 50%;
background: #68d466;
}
.loading-wave1,
.loading-wave2 {
position: absolute;
left: 50%;
/* background: #FFFFFF; */
opacity: .5;
border-radius: 37%;
transform: translate(-50%, -40%);
animation: rotate 3s linear infinite;
z-index: 10;
/* transition: 0.3s; */
}
.loading-wave2 {
border-radius: 40%;
opacity: 0.7;
transform: translate(-50%, -43%) rotate(0);
animation: rotate 4s linear -4s infinite;
z-index: 20;
}
.loading-text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: #FFFFFF;
z-index: 30;
}
@keyframes rotate {
50% {
transform: translate(-50%, -43%) rotate(180deg);
}
100% {
transform: translate(-50%, -40%) rotate(360deg);
}
}
load-line.js文件
const appInstance = getApp() // 获取app实例
Component({
options: {
multipleSlots: true // 支持多个插槽
},
/**
* 组件的属性列表
*/
properties: {
loadType: { //加载条的类型，line-线形，circle-圆形
type: String,
default: 'line'
},
lineInfo: {
type: Object,
default: function () {
var info = {
colorChange: false, //颜色是否渐变
loadColor: '#6ee2e1,#2ba98c,#a07e1e' //进度条颜色,渐变时色值至少三种，非渐变时只需一种色值，多传取第一条，多个色值','逗号分开
}
return info;
}
},
circleInfo: {
type: Object,
default: function () {
var info = {
foreground: '#FFFFFF', //圆形进度条前景色
background: '#6ED4BF', //背景色
circleColor: '#cec4c4' //中心圆盘的颜色
}
return info;
}
},
ballInfo: {
type: Object,
default: function () {
var info = {
ballType: 'all', //center-只中心出现水波，all-球面也出现水波
ballSize: 100, //球形的大小，最大200，最小50，超出范围可能样式需要再进行优化
waveColor: '#cec4c4', //水波颜色
ballPadding: '5px', //球内间距
}
return info;
}
},
loadText: { //加载时显示的文字
type: String,
default: '加载中：'
},
loadPercent: { //进度百分比，不需要加%
type: Number,
default: 0
}
},
onLoad() {
},
/**
* 组件的初始数据
*/
data: {
ballSize_: 0
},
attached: function () {
// console.log(this.properties.loadPercent) //可以获取父组件传过来的值
// console.log(this.properties.ballInfo.ballSize) //可以获取父组件传过来的值
if (this.properties.ballInfo.ballSize > 200) {
this.setData({
ballSize_ :200
})
} else if (this.properties.ballInfo.ballSize < 50) {
this.setData({
ballSize_ :50
})
} else {
this.setData({
ballSize_ : this.properties.ballInfo.ballSize
})
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
load-line.json文件
{
"component": true,
"usingComponents": {}
}
父组件应用
.wxml文件
<view style=" width: 130rpx; height: 130rpx;">
<load-line loadPercent="{{loadPercent}}" ballInfo="{{ballInfo}}"></load-line>
</view>
.json文件
"usingComponents": {
"load-line": "/components/load-line/load-line"
},
.js代码
data: {
btncss: 1,
loadPercent: 50,
ballInfo: {
ballType: 'all',
ballSize: 55,
waveColor: '#0081ff',
ballPadding: '3px',
},
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
