新增加载更多动画

static-project
chen 2022-05-26 18:35:10 +08:00
parent a7b08fcf73
commit 3401446e65
11 changed files with 1121 additions and 111 deletions

View File

@ -37,6 +37,7 @@
/* 动画样式 start */
@import url("./commons/animate.min.css");
/* 动画样式 end */
@import url("./commons/loading.css");
page {background-color: #f4f4f4;}
.textc{

View File

@ -329,11 +329,18 @@ button:after{content: none!important;}
.pad-s10{padding-top: 10rpx;}
.pad-s20{padding-top: 20rpx;}
.pad-s25{padding-top: 25rpx;}
.pad-s28{padding-top: 28rpx;}
.pad-s30{padding-top: 30rpx;}
.pad-s32{padding-top: 32rpx;}
.pad-s36{padding-top: 36rpx;}
.pad-s40{padding-top: 40rpx;}
.pad-s50{padding-top: 50rpx;}
.pad-s60{padding-top: 60rpx;}
.pad-s70{padding-top: 70rpx;}
.pad-s80{padding-top: 80rpx;}
.pad-s90{padding-top: 90rpx;}
.pad-s100{padding-top: 100rpx;}
.pad-s110{padding-top: 110rpx;}
.pad-s120{padding-top: 120rpx;}
.pad-s140{padding-top: 140rpx;}
.pad-s160{padding-top: 160rpx;}

874
commons/loading.css Normal file
View File

@ -0,0 +1,874 @@
.loading-box {
display: flex;
justify-content: center;
width: 100%;
padding-top: 20px;
font-size: 30px;
color: rgba(253, 82, 75, 1);
vertical-align: top;
-webkit-transition: .3s color, .3s border;
transition: .3s color, .3s border;
}
/* .loading-box:hover {
color: #d60b52;
font-size: 0;
padding: 0;
border-width: 3px;
line-height: 200px;
}
.loading-box:hover [class*="loader-"] {
font-size: 70px;
line-height: 200px;
} */
[class*="loader-"] {
display: inline-block;
width: 1em;
height: 1em;
color: inherit;
vertical-align: middle;
pointer-events: none;
}
.loader-01 {
border: .2em dotted currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-01 linear infinite;
animation: 1s loader-01 linear infinite;
}
@-webkit-keyframes loader-01 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-01 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-02 {
border: .2em solid transparent;
border-left-color: currentcolor;
border-right-color: currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-02 linear infinite;
animation: 1s loader-02 linear infinite;
}
@-webkit-keyframes loader-02 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-02 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-03 {
border: .2em solid currentcolor;
border-bottom-color: transparent;
border-radius: 50%;
-webkit-animation: 1s loader-03 linear infinite;
animation: 1s loader-03 linear infinite;
position: relative;
}
@-webkit-keyframes loader-03 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-03 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-04 {
border: 1px solid currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-04 linear infinite;
animation: 1s loader-04 linear infinite;
position: relative;
}
.loader-04:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -.2em;
left: 50%;
border: .2em solid currentcolor;
border-radius: 50%;
}
@-webkit-keyframes loader-04 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-04 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-05 {
border: .2em solid transparent;
border-top-color: currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-05 linear infinite;
animation: 1s loader-05 linear infinite;
position: relative;
}
.loader-05:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -.2em;
left: -.2em;
border: .2em solid currentcolor;
border-radius: 50%;
opacity: .5;
}
@-webkit-keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-06 {
border: .2em solid currentcolor;
border-radius: 50%;
-webkit-animation: loader-06 1s ease-out infinite;
animation: loader-06 1s ease-out infinite;
}
@-webkit-keyframes loader-06 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-06 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader-07 {
border: 0 solid transparent;
border-radius: 50%;
position: relative;
}
.loader-07:before,
.loader-07:after {
content: '';
border: .2em solid currentcolor;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
-webkit-animation: loader-07 1s linear infinite;
animation: loader-07 1s linear infinite;
opacity: 0;
}
.loader-07:before {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.loader-07:after {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@-webkit-keyframes loader-07 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-07 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader-08 {
position: relative;
}
.loader-08:before,
.loader-08:after {
content: '';
width: inherit;
height: inherit;
border-radius: 50%;
background-color: currentcolor;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: loader-08 2.0s infinite ease-in-out;
animation: loader-08 2.0s infinite ease-in-out;
}
.loader-08:after {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes loader-08 {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loader-08 {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loader-09 {
background-color: currentcolor;
border-radius: 50%;
-webkit-animation: loader-09 1.0s infinite ease-in-out;
animation: loader-09 1.0s infinite ease-in-out;
}
@-webkit-keyframes loader-09 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-09 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader-10 {
position: relative;
-webkit-animation: loader-10-1 2.0s infinite linear;
animation: loader-10-1 2.0s infinite linear;
}
.loader-10:before,
.loader-10:after {
content: '';
width: 0;
height: 0;
border: .5em solid currentcolor;
display: block;
position: absolute;
border-radius: 100%;
-webkit-animation: loader-10-2 2s infinite ease-in-out;
animation: loader-10-2 2s infinite ease-in-out;
}
.loader-10:before {
top: 0;
left: 50%;
}
.loader-10:after {
bottom: 0;
right: 50%;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes loader-10-1 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-10-1 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-10-2 {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loader-10-2 {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loader-11 {
background-color: currentcolor;
-webkit-animation: loader-11 1.2s infinite ease-in-out;
animation: loader-11 1.2s infinite ease-in-out;
}
@-webkit-keyframes loader-11 {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@keyframes loader-11 {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.loader-12 {
position: relative;
}
.loader-12:before,
.loader-12:after {
content: '';
display: block;
position: absolute;
background-color: currentcolor;
left: 50%;
right: 0;
top: 0;
bottom: 50%;
box-shadow: -.5em 0 0 currentcolor;
-webkit-animation: loader-12 1s linear infinite;
animation: loader-12 1s linear infinite;
}
.loader-12:after {
top: 50%;
bottom: 0;
-webkit-animation-delay: .25s;
animation-delay: .25s;
}
@-webkit-keyframes loader-12 {
0%, 100% {
box-shadow: -.5em 0 0 transparent;
background-color: currentcolor;
}
50% {
box-shadow: -.5em 0 0 currentcolor;
background-color: transparent;
}
}
@keyframes loader-12 {
0%, 100% {
box-shadow: -.5em 0 0 transparent;
background-color: currentcolor;
}
50% {
box-shadow: -.5em 0 0 currentcolor;
background-color: transparent;
}
}
.loader-13:before,
.loader-13:after,
.loader-13 {
border-radius: 50%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: loader-13 1.8s infinite ease-in-out;
animation: loader-13 1.8s infinite ease-in-out;
}
.loader-13 {
color: currentcolor;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
top: -1em;
}
.loader-13:before {
right: 100%;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader-13:after {
left: 100%;
}
.loader-13:before,
.loader-13:after {
content: '';
display: block;
position: absolute;
top: 0;
width: inherit;
height: inherit;
}
@-webkit-keyframes loader-13 {
0%, 80%, 100% {
box-shadow: 0 1em 0 -1em;
}
40% {
box-shadow: 0 1em 0 -.2em;
}
}
@keyframes loader-13 {
0%, 80%, 100% {
box-shadow: 0 1em 0 -1em;
}
40% {
box-shadow: 0 1em 0 -.2em;
}
}
.loader-14 {
border-radius: 50%;
box-shadow: 0 1em 0 -.2em currentcolor;
position: relative;
-webkit-animation: loader-14 0.8s ease-in-out alternate infinite;
animation: loader-14 0.8s ease-in-out alternate infinite;
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
top: -1em;
}
.loader-14:after,
.loader-14:before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
box-shadow: inherit;
-webkit-animation: inherit;
animation: inherit;
}
.loader-14:before {
left: -1em;
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
.loader-14:after {
right: -1em;
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
@-webkit-keyframes loader-14 {
0% {
box-shadow: 0 2em 0 -.2em currentcolor;
}
100% {
box-shadow: 0 1em 0 -.2em currentcolor;
}
}
@keyframes loader-14 {
0% {
box-shadow: 0 2em 0 -.2em currentcolor;
}
100% {
box-shadow: 0 1em 0 -.2em currentcolor;
}
}
.loader-15 {
background: currentcolor;
position: relative;
-webkit-animation: loader-15 1s ease-in-out infinite;
animation: loader-15 1s ease-in-out infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
width: .25em;
height: .5em;
}
.loader-15:after,
.loader-15:before {
content: '';
position: absolute;
width: inherit;
height: inherit;
background: inherit;
-webkit-animation: inherit;
animation: inherit;
}
.loader-15:before {
right: .5em;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader-15:after {
left: .5em;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes loader-15 {
0%, 100% {
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
}
50% {
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
}
}
@keyframes loader-15 {
0%, 100% {
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
}
50% {
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
}
}
.loader-16 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-perspective: 1000px;
perspective: 1000px;
border-radius: 50%;
}
.loader-16:before,
.loader-16:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: 50%;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
.loader-16:before {
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
}
.loader-16:after {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@-webkit-keyframes rotateccw {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes rotateccw {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@-webkit-keyframes spin {
0%, 100% {
box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
box-shadow: .2em -.2em 0 0 currentcolor;
}
}
@keyframes spin {
0%, 100% {
box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
box-shadow: .2em -.2em 0 0 currentcolor;
}
}
.loader-17 {
position: relative;
background-color: currentcolor;
border-radius: 50%;
}
.loader-17:after,
.loader-17:before {
content: "";
position: absolute;
width: .25em;
height: .25em;
border-radius: 50%;
opacity: .8;
}
.loader-17:after {
left: -.5em;
top: -.25em;
background-color: currentcolor;
-webkit-transform-origin: .75em 1em;
transform-origin: .75em 1em;
-webkit-animation: loader-17 1s linear infinite;
animation: loader-17 1s linear infinite;
opacity: .6;
}
.loader-17:before {
left: -1.25em;
top: -.75em;
background-color: currentcolor;
-webkit-transform-origin: 1.5em 1em;
transform-origin: 1.5em 1em;
-webkit-animation: loader-17 2s linear infinite;
animation: loader-17 2s linear infinite;
}
@-webkit-keyframes loader-17 {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
transform: rotateZ(360deg) translate3d(0, 0, 0);
}
}
@keyframes loader-17 {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
transform: rotateZ(360deg) translate3d(0, 0, 0);
}
}
.loader-18 {
position: relative;
}
.loader-18:before,
.loader-18:after {
content: '';
display: block;
position: absolute;
border-radius: 50%;
border: .1em solid transparent;
border-bottom-color: currentcolor;
top: 0;
left: 0;
-webkit-animation: 1s loader-18 linear infinite;
animation: 1s loader-18 linear infinite;
}
.loader-18:before {
width: 1em;
height: 1em;
}
.loader-18:after {
width: .8em;
height: .8em;
top: .1em;
left: .1em;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
@-webkit-keyframes loader-18 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-18 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-19 {
border-top: .2em solid currentcolor;
border-right: .2em solid transparent;
-webkit-animation: loader-19 1s linear infinite;
animation: loader-19 1s linear infinite;
border-radius: 100%;
position: relative;
}
@-webkit-keyframes loader-19 {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-19 {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

View File

@ -59,7 +59,7 @@
animation: scale_name 1s linear alternate infinite;
}
@keyframes scale_name{
from{transform: scale(1);}
to{transform: scale(1.2);}
from{transform: scale(.9);}
to{transform: scale(1);}
}
</style>

View File

@ -15,12 +15,22 @@
</view>
</view>
</view>
<view class="mar-s60" v-if="total==dataList.length">
<pitera textStr="—— 到底啦 ——"></pitera>
</view>
<view class="loading-box mar-s60" v-show="ifLoading">
<view class="loader-16"></view>
</view>
</view>
</template>
<script>
import pitera from '@/components/nothing/pitera';
export default {
name:"list-one",
components:{
pitera
},
props:{
//
ifTitle:{
@ -47,10 +57,21 @@
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
]
],
ifLoading:false,
total:0
};
},
methods:{
moreEv() {
this.ifLoading = true;
setTimeout(()=>{
this.total = this.dataList.length;
this.ifLoading = false;
console.log(this.total);
},2000)
console.log('触底了');
},
//
addCartEv(id) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')

View File

@ -1,6 +1,6 @@
<template>
<view class="pad-x120">
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeIn' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
<view class="slide-list"
@touchstart="touchStart($event, index)"
@touchend="touchEnd($event, index)"
@ -50,7 +50,11 @@
</view>
</view>
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车:这也空空,那也空空(*^▽^*)"></nothing-page>
<pitera textStr="——到底啦——"></pitera>
<view class="" v-if="total == listData.length"></view>
<pitera textStr="—— 到底啦 ——"></pitera>
<view class="loading-box" v-show="ifMore">
<view class="loader-16"></view>
</view>
</view>
</template>
@ -141,6 +145,8 @@
maxNum:20,//
minNum:1,//
ifLoading:true,
total:0,
ifMore:false
};
},
mounted() {
@ -149,6 +155,13 @@
},
methods: {
getList(){
console.log('触底');
this.total = 0;
this.ifMore = true;
setTimeout(()=>{
this.ifMore = false;
this.total = this.listData.length;
},2000)
// for (let i = 0; i < 10; i++) {
// this.listData.push({id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '',content: '',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true})
// }
@ -398,7 +411,7 @@
}
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
.countInput{background-color: #FFFFFF;width: 80rpx;height: 40rpx!important; border-radius: 10rpx;padding: 0rpx 0;margin: 0 10rpx;}
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 20rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, 0);}
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF;z-index: 2; padding: 20rpx 20rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, 0);}
.cart-submit-btn{
color: #FFFFFF;

View File

@ -3,7 +3,7 @@
<status-container :ifReturn="false" titlet="分类">
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
<view class="dis">
<view>
<view class="cate-left-box">
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
<view class="pad-x160">
<view class="flexs clips1 pad-z20 fon24"
@ -16,6 +16,8 @@
<view class="pad-sx20" :style="{width: newWidth+'px'}">
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
</view>
<scroll-view scroll-y="true" @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
<view class=" posir" style="padding-bottom: 220rpx;">
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
@ -29,7 +31,12 @@
</view>
</view>
</view>
<view class="mar-s40"><pitera textStr="——到底啦——"></pitera></view>
<view class="mar-s40" v-if="total==dataList.length"><pitera textStr="——到底啦——"></pitera></view>
<view class="loading-box" v-show="ifLoading" style="position: absolute;left: 50%;transform: translateX(-50%);" :style="{bottom:footHeight+10+'px'}">
<view class="loader-16"></view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
@ -45,6 +52,7 @@
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
//
import footTab from '@/components/foot-tabs/foot-tab.vue';
import { mapState,mapGetters,mapMutations } from 'vuex'//mapState
export default {
components:{
'foot-tab' :footTab,
@ -56,7 +64,7 @@
return {
current:0,
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth - 100,
newWidth:uni.getSystemInfoSync().windowWidth,
cateList:[
{id:1,title:'推荐套装'},
{id:1,title:'推荐套装'},
@ -84,34 +92,47 @@
dataList:[
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题',price:199},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
],
ifloading:false,
flag:true
total:0,
flag:true,
ifLoading:false
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
//
const query = wx.createSelectorQuery().in(this)
query.select('.cate-left-box').boundingClientRect((rect) => {
this.newWidth = this.newWidth - rect.width - 20;
}).exec()
console.log(this.footHeight);
this.scrollHeight = this.scrollHeight - this.footHeight;
if(op.index) {
this.current = op.index;
}
},
methods: {
scrollBottomEv(e){
if(this.flag){
this.flag = false;
this.ifloading = true;
scrollBottomEv(){
console.log('触底了');
this.ifLoading = true;
setTimeout(()=>{
for (let i = 0; i < 2; i++) {
let obj = {
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
}
this.dataList[e].push(obj);
}
this.ifloading = false;
this.flag = true;
},1000)
//
this.$forceUpdate();
}
this.total = this.dataList.length;
this.ifLoading = false;
},2000)
},
//
chooseCate(index) {

View File

@ -21,8 +21,8 @@
</view>
</view>
<!-- 添加微信 -->
<view class="" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false" style="position: fixed;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.86);z-index: 4;">
<view class="pad-s120 pad-zy50">
<view class="addwxpop" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false">
<view class="pad-s80 pad-zy50">
<view class="bacf pad20 disjcac" style="width: 420rpx;height: 420rpx;margin: 0 auto;">
<image :src="imgsrc" style="width: 380rpx;height: 380rpx;" mode="aspectFill"></image>
</view>
@ -119,4 +119,6 @@
<style>
page{background-color: #f7f7f7;}
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
.addwxpop{position: fixed;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.86);z-index: 4;overflow: hidden;overflow-y: scroll;padding-bottom: 180rpx;}
.addwxpop::-webkit-scrollbar{display: none;}
</style>

View File

@ -16,12 +16,9 @@
<gong-ge-function itemTop="40rpx" @chooseGe="chooseGe" :list="list"></gong-ge-function>
</view>
<view class="pad-zy20">
<list-one :ifTitle="true"></list-one>
<list-one ref="listhome" :ifTitle="true"></list-one>
</view>
<view class="mar-s60">
<pitera textStr="——到底啦——"></pitera>
</view>
<customer-one></customer-one>
<customer-one :nbottom="150"></customer-one>
<!-- 底部tab -->
<foot-tab></foot-tab>
</view>
@ -33,7 +30,6 @@
import footTab from '@/components/foot-tabs/foot-tab.vue';
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
import listOne from '@/components/list/list-one';
import pitera from '@/components/nothing/pitera';
import customerOne from '@/components/customer/customer-one';
export default {
components:{
@ -42,7 +38,6 @@
statusNav,
swiperPu,
listOne,
pitera,
customerOne
},
data() {
@ -63,11 +58,12 @@
],
keyword:'',
isplay:false,
playTimer:null
playTimer:null,
}
},
onReachBottom() {
onReachBottom(e) {
console.log(e);
this.$refs.listhome.moreEv();
},
onHide() {
clearTimeout(this.playTimer);

View File

@ -2,8 +2,46 @@
<view>
<status-container titlet="订单管理" :ifCustomer='false'>
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
<view class="bacf">
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading" :tagList="tagList" :tagIndex="tagIndex"></swiperTabSlide>
<view class="bacf posir">
<view class="posi-sticky pad-x20 pad-zy20" :style="{top: newTop +'px'}">
<!-- <scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide> -->
<swiper-tab-jl :list="tagList" v-model="activeIndex" @changeEv="tabTap" itemColor="#FFFFFF"></swiper-tab-jl>
</view>
<swiper :style="{height: swiperHeight + 'px'}" class="fon30" style="background-color: #f4f4f4;" :current="activeIndex" @change="swiperChange">
<swiper-item v-for="(item,index) in dataList.length" :key="index" class="pad-s30">
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
<!-- 列表数据 -->
<view class="radius20 bacf pad-zy30 mar-x25 mar-zy40" @tap="goDetail" v-for="(item1,index1) in dataList[index]" :key="index1">
<view class="disjbac bbot pad30" style="margin: 0 -30rpx;">
<view class="">订单号2928392832</view>
<view class="" :style="{color: ['#f83030','#f83030','#f83030','#a0a0a0','#a0a0a0'][0]}">{{['已下单','制作中','已发货','已完成','已取消'][0]}}</view>
</view>
<view class="disjb borbot pad-sx30" v-for="(item2,index2) in 2" :key="index2">
<image class="mar-y30 flexs radius40" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 210rpx;height: 210rpx;"></image>
<view class="width100 disjb fc" style="height: 210rpx;">
<view class="clips2 fon24">{{item1.title}}</view>
<view class="">
<view class="fon24 mar-x30" style="color: #8c8c9b;">单位{{item1.title}}</view>
<view class="disjbac ">
<view class="textc bold">{{$toolAll.tools.changeNum(item1.price)}}</view>
<view class="fon24" style="color: #8c8c9b;">x1</view>
</view>
</view>
</view>
</view>
<view class="disjbac tbot pad30" style="margin: 0 -30rpx;">
<view class="bold" style="color: #f83030;">合计2390.00</view>
<!-- <view class="btn" @tap.stop="cancleEv">取消订单</view> -->
<view class="btn csbtn" @tap.stop="buyEv">再次购买</view>
</view>
</view>
<view class="pad-sx40" v-if="total==dataList.length"><pitera textStr="—— 到底啦 ——"></pitera></view>
</scroll-view>
</swiper-item>
</swiper>
<view class="loading-box" v-show="ifLoading" style="position: absolute;bottom: 20rpx; left: 50%;transform: translateX(-50%);">
<view class="loader-16"></view>
</view>
</view>
</view>
</status-container>
@ -11,13 +49,15 @@
</template>
<script>
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
//
import footTab from '@/components/foot-tabs/foot-tab.vue';
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
import pitera from '@/components/nothing/pitera';
export default {
components:{
'foot-tab' :footTab,
swiperTabSlide
swiperTabJl,
pitera
},
data() {
return {
@ -29,7 +69,7 @@
{title:'已完成'},
{title:'已取消'},
],
tagIndex:0,
activeIndex:0,
dataList:[
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
@ -62,38 +102,72 @@
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
],
ifloading:false,
flag:true
flag:true,
swiperHeight:uni.getSystemInfoSync().windowHeight,
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
ifLoading:false,
total:0
}
},
onLoad(op) {
const query = wx.createSelectorQuery().in(this)
query.select('.posi-sticky').boundingClientRect((rect) => {
this.swiperHeight = this.swiperHeight - this.newTop - rect.height;
}).exec()
if(op.index) {
this.tagIndex = op.index;
this.activeIndex = op.index;
}
},
methods: {
scrollBottomEv(e){
if(this.flag){
this.flag = false;
this.ifloading = true;
tabTap(e) {
this.activeIndex = e;
},
swiperChange(e) {
this.activeIndex = e.detail.current;
},
scrollBottomEv(e) {
this.ifLoading = true;
this.total = 0;
setTimeout(()=>{
for (let i = 0; i < 2; i++) {
let obj = {
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
}
this.dataList[e].push(obj);
}
this.ifloading = false;
this.flag = true;
},1000)
//
this.$forceUpdate();
}
this.ifLoading = false;
this.total = this.dataList.length;
},2000)
},
//
goDetail(){
uni.navigateTo({
url:'/pagesB/order-detail/order-detail'
})
},
//
cancleEv(){
console.log('取消订单');
},
//
buyEv(){
uni.navigateTo({
url:'/pagesB/settlement/settlement'
})
}
}
}
</script>
<style>
.btn{
width: 150rpx;
height: 64rpx;
line-height: 64rpx;
color: #8c8c9b;
border: 2rpx solid #d3d3d3;
border-radius: 20rpx;
text-align: center;
box-sizing: border-box;
}
.csbtn{
border: none;
background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);
color: #FFFFFF;
box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);
}
</style>

View File

@ -9,10 +9,7 @@
</view>
<view class="fon30 bold" v-if="keyword && ifResult">结果:{{keyword}}<text v-if="num" class="textc">{{num}}</text></view>
</view>
<list-one></list-one>
<view class="mar-s60">
<pitera textStr="——到底啦——"></pitera>
</view>
<list-one ref="list"></list-one>
</view>
</status-container>
</view>
@ -29,11 +26,15 @@
data() {
return {
padt:uni.getSystemInfoSync().statusBarHeight + 50,
windowHeigh:uni.getSystemInfoSync().windowHeight,
keyword:'',
num:11,
ifResult:true
}
},
onReachBottom(e) {
this.$refs.list.moreEv();
},
onLoad(op) {
if(op.keyword) this.keyword = op.keyword;
},