新增加载更多动画
parent
a7b08fcf73
commit
3401446e65
1
App.vue
1
App.vue
|
|
@ -37,6 +37,7 @@
|
||||||
/* 动画样式 start */
|
/* 动画样式 start */
|
||||||
@import url("./commons/animate.min.css");
|
@import url("./commons/animate.min.css");
|
||||||
/* 动画样式 end */
|
/* 动画样式 end */
|
||||||
|
@import url("./commons/loading.css");
|
||||||
|
|
||||||
page {background-color: #f4f4f4;}
|
page {background-color: #f4f4f4;}
|
||||||
.textc{
|
.textc{
|
||||||
|
|
|
||||||
|
|
@ -329,11 +329,18 @@ button:after{content: none!important;}
|
||||||
.pad-s10{padding-top: 10rpx;}
|
.pad-s10{padding-top: 10rpx;}
|
||||||
.pad-s20{padding-top: 20rpx;}
|
.pad-s20{padding-top: 20rpx;}
|
||||||
.pad-s25{padding-top: 25rpx;}
|
.pad-s25{padding-top: 25rpx;}
|
||||||
|
.pad-s28{padding-top: 28rpx;}
|
||||||
.pad-s30{padding-top: 30rpx;}
|
.pad-s30{padding-top: 30rpx;}
|
||||||
.pad-s32{padding-top: 32rpx;}
|
.pad-s32{padding-top: 32rpx;}
|
||||||
.pad-s36{padding-top: 36rpx;}
|
.pad-s36{padding-top: 36rpx;}
|
||||||
.pad-s40{padding-top: 40rpx;}
|
.pad-s40{padding-top: 40rpx;}
|
||||||
.pad-s50{padding-top: 50rpx;}
|
.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-s120{padding-top: 120rpx;}
|
||||||
.pad-s140{padding-top: 140rpx;}
|
.pad-s140{padding-top: 140rpx;}
|
||||||
.pad-s160{padding-top: 160rpx;}
|
.pad-s160{padding-top: 160rpx;}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
animation: scale_name 1s linear alternate infinite;
|
animation: scale_name 1s linear alternate infinite;
|
||||||
}
|
}
|
||||||
@keyframes scale_name{
|
@keyframes scale_name{
|
||||||
from{transform: scale(1);}
|
from{transform: scale(.9);}
|
||||||
to{transform: scale(1.2);}
|
to{transform: scale(1);}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,22 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import pitera from '@/components/nothing/pitera';
|
||||||
export default {
|
export default {
|
||||||
name:"list-one",
|
name:"list-one",
|
||||||
|
components:{
|
||||||
|
pitera
|
||||||
|
},
|
||||||
props:{
|
props:{
|
||||||
// 是否显示标题
|
// 是否显示标题
|
||||||
ifTitle:{
|
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'},
|
{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:{
|
methods:{
|
||||||
|
moreEv() {
|
||||||
|
this.ifLoading = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.total = this.dataList.length;
|
||||||
|
this.ifLoading = false;
|
||||||
|
console.log(this.total);
|
||||||
|
},2000)
|
||||||
|
console.log('触底了');
|
||||||
|
},
|
||||||
// 加入购物车
|
// 加入购物车
|
||||||
addCartEv(id) {
|
addCartEv(id) {
|
||||||
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="pad-x120">
|
<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"
|
<view class="slide-list"
|
||||||
@touchstart="touchStart($event, index)"
|
@touchstart="touchStart($event, index)"
|
||||||
@touchend="touchEnd($event, index)"
|
@touchend="touchEnd($event, index)"
|
||||||
|
|
@ -50,7 +50,11 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -141,6 +145,8 @@
|
||||||
maxNum:20,//最大可输入数量
|
maxNum:20,//最大可输入数量
|
||||||
minNum:1,//最小可输入数量
|
minNum:1,//最小可输入数量
|
||||||
ifLoading:true,
|
ifLoading:true,
|
||||||
|
total:0,
|
||||||
|
ifMore:false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -149,6 +155,13 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getList(){
|
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++) {
|
// 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})
|
// 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;}
|
.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;}
|
.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{
|
.cart-submit-btn{
|
||||||
|
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<status-container :ifReturn="false" titlet="分类">
|
<status-container :ifReturn="false" titlet="分类">
|
||||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||||
<view class="dis">
|
<view class="dis">
|
||||||
<view>
|
<view class="cate-left-box">
|
||||||
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
|
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
|
||||||
<view class="pad-x160">
|
<view class="pad-x160">
|
||||||
<view class="flexs clips1 pad-z20 fon24"
|
<view class="flexs clips1 pad-z20 fon24"
|
||||||
|
|
@ -16,20 +16,27 @@
|
||||||
<view class="pad-sx20" :style="{width: newWidth+'px'}">
|
<view class="pad-sx20" :style="{width: newWidth+'px'}">
|
||||||
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
|
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
|
||||||
</view>
|
</view>
|
||||||
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
|
<scroll-view scroll-y="true" @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
|
||||||
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
|
<view class=" posir" style="padding-bottom: 220rpx;">
|
||||||
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
|
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
|
||||||
<view class="fon30 colb clips2">{{item.title}}</view>
|
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
|
||||||
<view class="">
|
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
|
||||||
<view class="fon36 textc mar-x36">￥{{$toolAll.tools.changeNum(item.price)}}</view>
|
<view class="fon30 colb clips2">{{item.title}}</view>
|
||||||
<view @tap.stop="addCartEv(index)" class="colf disjcac fon24 radius30 cate-btn">
|
<view class="">
|
||||||
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
|
<view class="fon36 textc mar-x36">￥{{$toolAll.tools.changeNum(item.price)}}</view>
|
||||||
立即选购
|
<view @tap.stop="addCartEv(index)" class="colf disjcac fon24 radius30 cate-btn">
|
||||||
|
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
|
||||||
|
立即选购
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</view>
|
</scroll-view>
|
||||||
<view class="mar-s40"><pitera textStr="——到底啦——"></pitera></view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -45,6 +52,7 @@
|
||||||
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTab,
|
'foot-tab' :footTab,
|
||||||
|
|
@ -56,7 +64,7 @@
|
||||||
return {
|
return {
|
||||||
current:0,
|
current:0,
|
||||||
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
||||||
newWidth:uni.getSystemInfoSync().windowWidth - 100,
|
newWidth:uni.getSystemInfoSync().windowWidth,
|
||||||
cateList:[
|
cateList:[
|
||||||
{id:1,title:'推荐套装'},
|
{id:1,title:'推荐套装'},
|
||||||
{id:1,title:'推荐套装'},
|
{id:1,title:'推荐套装'},
|
||||||
|
|
@ -84,34 +92,47 @@
|
||||||
dataList:[
|
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: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},
|
||||||
|
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||||
],
|
],
|
||||||
ifloading:false,
|
total:0,
|
||||||
flag:true
|
flag:true,
|
||||||
|
ifLoading:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed:{
|
||||||
|
...mapState({
|
||||||
|
footHeight: state => state.moduleA.footHeight,
|
||||||
|
}),
|
||||||
|
},
|
||||||
onLoad(op) {
|
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) {
|
if(op.index) {
|
||||||
this.current = op.index;
|
this.current = op.index;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
scrollBottomEv(e){
|
scrollBottomEv(){
|
||||||
if(this.flag){
|
console.log('触底了');
|
||||||
this.flag = false;
|
this.ifLoading = true;
|
||||||
this.ifloading = true;
|
setTimeout(()=>{
|
||||||
setTimeout(()=>{
|
this.total = this.dataList.length;
|
||||||
for (let i = 0; i < 2; i++) {
|
this.ifLoading = false;
|
||||||
let obj = {
|
},2000)
|
||||||
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
|
||||||
}
|
|
||||||
this.dataList[e].push(obj);
|
|
||||||
}
|
|
||||||
this.ifloading = false;
|
|
||||||
this.flag = true;
|
|
||||||
},1000)
|
|
||||||
// 重新渲染组件
|
|
||||||
this.$forceUpdate();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// 一级分类选择
|
// 一级分类选择
|
||||||
chooseCate(index) {
|
chooseCate(index) {
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,8 @@
|
||||||
</view>
|
</view>
|
||||||
</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="addwxpop" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false">
|
||||||
<view class="pad-s120 pad-zy50">
|
<view class="pad-s80 pad-zy50">
|
||||||
<view class="bacf pad20 disjcac" style="width: 420rpx;height: 420rpx;margin: 0 auto;">
|
<view class="bacf pad20 disjcac" style="width: 420rpx;height: 420rpx;margin: 0 auto;">
|
||||||
<image :src="imgsrc" style="width: 380rpx;height: 380rpx;" mode="aspectFill"></image>
|
<image :src="imgsrc" style="width: 380rpx;height: 380rpx;" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -119,4 +119,6 @@
|
||||||
<style>
|
<style>
|
||||||
page{background-color: #f7f7f7;}
|
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);}
|
.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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,12 +16,9 @@
|
||||||
<gong-ge-function itemTop="40rpx" @chooseGe="chooseGe" :list="list"></gong-ge-function>
|
<gong-ge-function itemTop="40rpx" @chooseGe="chooseGe" :list="list"></gong-ge-function>
|
||||||
</view>
|
</view>
|
||||||
<view class="pad-zy20">
|
<view class="pad-zy20">
|
||||||
<list-one :ifTitle="true"></list-one>
|
<list-one ref="listhome" :ifTitle="true"></list-one>
|
||||||
</view>
|
</view>
|
||||||
<view class="mar-s60">
|
<customer-one :nbottom="150"></customer-one>
|
||||||
<pitera textStr="——到底啦——"></pitera>
|
|
||||||
</view>
|
|
||||||
<customer-one></customer-one>
|
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab></foot-tab>
|
<foot-tab></foot-tab>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -33,7 +30,6 @@
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||||
import listOne from '@/components/list/list-one';
|
import listOne from '@/components/list/list-one';
|
||||||
import pitera from '@/components/nothing/pitera';
|
|
||||||
import customerOne from '@/components/customer/customer-one';
|
import customerOne from '@/components/customer/customer-one';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
|
|
@ -42,7 +38,6 @@
|
||||||
statusNav,
|
statusNav,
|
||||||
swiperPu,
|
swiperPu,
|
||||||
listOne,
|
listOne,
|
||||||
pitera,
|
|
||||||
customerOne
|
customerOne
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -63,11 +58,12 @@
|
||||||
],
|
],
|
||||||
keyword:'',
|
keyword:'',
|
||||||
isplay:false,
|
isplay:false,
|
||||||
playTimer:null
|
playTimer:null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom(e) {
|
||||||
|
console.log(e);
|
||||||
|
this.$refs.listhome.moreEv();
|
||||||
},
|
},
|
||||||
onHide() {
|
onHide() {
|
||||||
clearTimeout(this.playTimer);
|
clearTimeout(this.playTimer);
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,46 @@
|
||||||
<view>
|
<view>
|
||||||
<status-container titlet="订单管理" :ifCustomer='false'>
|
<status-container titlet="订单管理" :ifCustomer='false'>
|
||||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||||
<view class="bacf">
|
<view class="bacf posir">
|
||||||
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading" :tagList="tagList" :tagIndex="tagIndex"></swiperTabSlide>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
|
|
@ -11,13 +49,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
|
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.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 {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTab,
|
'foot-tab' :footTab,
|
||||||
swiperTabSlide
|
swiperTabJl,
|
||||||
|
pitera
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -29,71 +69,105 @@
|
||||||
{title:'已完成'},
|
{title:'已完成'},
|
||||||
{title:'已取消'},
|
{title:'已取消'},
|
||||||
],
|
],
|
||||||
tagIndex:0,
|
activeIndex:0,
|
||||||
dataList:[
|
dataList:[
|
||||||
[
|
[
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
],
|
|
||||||
[
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
|
||||||
],
|
|
||||||
],
|
],
|
||||||
ifloading:false,
|
[
|
||||||
flag:true
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
flag:true,
|
||||||
|
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||||||
|
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||||
|
ifLoading:false,
|
||||||
|
total:0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(op) {
|
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) {
|
if(op.index) {
|
||||||
this.tagIndex = op.index;
|
this.activeIndex = op.index;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
scrollBottomEv(e){
|
tabTap(e) {
|
||||||
if(this.flag){
|
this.activeIndex = e;
|
||||||
this.flag = false;
|
},
|
||||||
this.ifloading = true;
|
swiperChange(e) {
|
||||||
setTimeout(()=>{
|
this.activeIndex = e.detail.current;
|
||||||
for (let i = 0; i < 2; i++) {
|
},
|
||||||
let obj = {
|
scrollBottomEv(e) {
|
||||||
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
this.ifLoading = true;
|
||||||
}
|
this.total = 0;
|
||||||
this.dataList[e].push(obj);
|
setTimeout(()=>{
|
||||||
}
|
this.ifLoading = false;
|
||||||
this.ifloading = false;
|
this.total = this.dataList.length;
|
||||||
this.flag = true;
|
},2000)
|
||||||
},1000)
|
},
|
||||||
// 重新渲染组件
|
// 去详情
|
||||||
this.$forceUpdate();
|
goDetail(){
|
||||||
}
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/order-detail/order-detail'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 取消订单
|
||||||
|
cancleEv(){
|
||||||
|
console.log('取消订单');
|
||||||
|
},
|
||||||
|
// 再次购买
|
||||||
|
buyEv(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/settlement/settlement'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text v-if="num" class="textc">（{{num}}）</text></view>
|
<view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text v-if="num" class="textc">（{{num}}）</text></view>
|
||||||
</view>
|
</view>
|
||||||
<list-one></list-one>
|
<list-one ref="list"></list-one>
|
||||||
<view class="mar-s60">
|
|
||||||
<pitera textStr="——到底啦——"></pitera>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -29,11 +26,15 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
padt:uni.getSystemInfoSync().statusBarHeight + 50,
|
padt:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||||
|
windowHeigh:uni.getSystemInfoSync().windowHeight,
|
||||||
keyword:'',
|
keyword:'',
|
||||||
num:11,
|
num:11,
|
||||||
ifResult:true
|
ifResult:true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onReachBottom(e) {
|
||||||
|
this.$refs.list.moreEv();
|
||||||
|
},
|
||||||
onLoad(op) {
|
onLoad(op) {
|
||||||
if(op.keyword) this.keyword = op.keyword;
|
if(op.keyword) this.keyword = op.keyword;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue