molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-07 06:24:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

2.1.1

Browse Source
This commit is contained in:
Weilanwl
2019-03-27 00:56:15 +08:00
parent 5742a427fe
commit 2ab09927bc
48 changed files with 1629 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Colorui-UniApp/App.vue
View File

@@ -4,7 +4,7 @@
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP-WEIXIN
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
@@ -13,7 +13,7 @@
};
// #endif
// #ifdef MP-WEIXIN
// #ifdef MP
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
@@ -110,8 +110,8 @@
</script>
<style>
@import "icon.css";
@import "colorui.css";
@import "colorui/main.css";
@import "colorui/icon.css";
.nav-list {
display: flex;

184
Colorui-UniApp/colorui/animation.css Normal file
View File

@@ -0,0 +1,184 @@
/*
Animation 微动画
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
*/
/* css 滤镜 控制黑白底色gif的 */
.gif-black{
mix-blend-mode: screen;
}
.gif-white{
mix-blend-mode: multiply;
}
/* Animation css */
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}

65
Colorui-UniApp/colorui/components/cu-custom.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<view>
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
<view class='action' @tap="BackPage" v-if="isBack">
<text class='icon-back'></text>
<slot name="backText"></slot>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
<slot name="content"></slot>
</view>
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar
};
},
name: 'cu-custom',
computed: {
style() {
var StatusBar= this.StatusBar;
var CustomBar= this.CustomBar;
var bgImage = this.bgImage;
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`;
}
return style
}
},
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
},
methods: {
BackPage() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style>
</style>

0
Colorui-UniApp/icon.css → Colorui-UniApp/colorui/icon.css
View File

487
Colorui-UniApp/colorui.css → Colorui-UniApp/colorui/main.css
View File

@@ -11,7 +11,7 @@
初始化
==================== */
body {
background: #f1f1f1;
background-color: #f1f1f1;
font-size: 28upx;
color: 333;
font-family: Helvetica Neue, Helvetica, sans-serif;
@@ -72,7 +72,7 @@ image {
image.loading::before {
content: "";
background: #f5f5f5;
background-color: #f5f5f5;
display: block;
position: absolute;
width: 100%;
@@ -248,7 +248,7 @@ radio .uni-radio-input::before {
radio.radio[checked]::after,
radio.radio .uni-radio-input-checked::after {
content: "";
background: transparent;
background-color: transparent;
display: block;
position: absolute;
width: 8px;
@@ -260,11 +260,11 @@ radio.radio .uni-radio-input-checked::after {
bottom: 0;
margin: auto;
border-radius: 200upx;
/* #ifdef H5 */
/* #ifndef MP */
border: 7px solid #fff !important;
/* #endif */
/* #ifdef MP-WEIXIN */
/* #ifdef MP */
border: 8px solid #fff !important;
/* #endif */
}
@@ -883,6 +883,7 @@ button.icon.lg {
padding: 0upx 16upx;
height: 48upx;
font-family: Helvetica Neue, Helvetica, sans-serif;
white-space: nowrap;
}
.cu-tag:not([class*="bg"]):not([class*="line"]) {
@@ -984,7 +985,7 @@ button.icon.lg {
}
.cu-tag.badge:not([class*="bg-"]) {
background: #dd514c;
background-color: #dd514c;
}
.cu-tag:empty:not([class*="icon"]) {
@@ -1014,7 +1015,7 @@ button.icon.lg {
text-align: center;
justify-content: center;
align-items: center;
background: #ccc;
background-color: #ccc;
color: #fff;
white-space: nowrap;
position: relative;
@@ -1197,7 +1198,7 @@ button.icon.lg {
margin: auto;
width: 260upx;
height: 260upx;
background: #fff;
background-color: #fff;
border-radius: 10upx;
box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
display: flex;
@@ -1221,7 +1222,7 @@ button.icon.lg {
.cu-load.load-modal::after {
content: "";
position: absolute;
background: #fff;
background-color: #fff;
border-radius: 50%;
width: 200upx;
height: 200upx;
@@ -1309,282 +1310,292 @@ button.icon.lg {
filter: grayscale(1);
}
.cu-list.menu {
display: block;
overflow: hidden;
.cu-list+.cu-list {
margin-top: 30upx
}
.cu-list+.cu-list {
margin-top: 30upx;
.cu-list>.cu-item {
transition: all .6s ease-in-out 0s;
transform: translateX(0upx)
}
.cu-list>.cu-item.move-cur {
transform: translateX(-260upx)
}
.cu-list>.cu-item .move {
position: absolute;
right: 0;
display: flex;
width: 260upx;
height: 100%;
transform: translateX(100%)
}
.cu-list>.cu-item .move view {
display: flex;
flex: 1;
justify-content: center;
align-items: center
}
.cu-list.menu-avatar>.cu-item {
position: relative;
display: flex;
padding-right: 30upx;
height: 140upx;
background-color: #fff;
justify-content: flex-end;
align-items: center
}
.cu-list.menu-avatar>.cu-item>.cu-avatar {
position: absolute;
left: 30upx
}
.cu-list.menu-avatar>.cu-item .flex .text-cut {
max-width: 510upx
}
.cu-list.menu-avatar>.cu-item .content {
position: absolute;
left: 146upx;
width: calc(100% - 96upx - 60upx - 120upx - 20upx);
line-height: 1.6em;
}
.cu-list.menu-avatar>.cu-item .content>view:first-child {
font-size: 30upx;
display: flex;
align-items: center
}
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
display: inline-block;
margin-left: 10upx;
height: 28upx;
font-size: 16upx;
line-height: 32upx
}
.cu-list.menu-avatar>.cu-item .action {
width: 100upx;
text-align: center
}
.cu-list.menu-avatar>.cu-item .action view+view {
margin-top: 10upx
}
.cu-list.menu-avatar.comment>.cu-item {
padding-top: 30upx;
padding-bottom: 30upx;
padding-left: 120upx;
height: auto
}
.cu-list.menu-avatar.comment .cu-avatar {
align-self: flex-start
}
.cu-list.menu>.cu-item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100upx;
background: #fff;
padding: 0 30upx;
min-height: 100upx;
background-color: #fff;
justify-content: space-between;
align-items: center
}
.cu-list.menu>.cu-item::after {
content: " ";
width: 200%;
height: 200%;
.cu-list.menu>.cu-item:last-child:after {
border: none
}
.cu-list.menu>.cu-item:after {
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
width: 200%;
height: 200%;
border-bottom: 1upx solid #ddd;
border-radius: inherit;
content: " ";
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none
}
.cu-list.menu.sm-border>.cu-item::after {
width: calc(200% - 120upx);
left: 30upx;
}
.cu-list.menu>.cu-item:last-child::after {
border: none;
.cu-list.menu>.cu-item.grayscale {
background-color: #f5f5f5
}
.cu-list.menu>.cu-item.cur {
background-color: #fcf7e9;
background-color: #fcf7e9
}
.cu-list.menu-avatar>.cu-item {
padding-left: 140upx;
.cu-list.menu>.cu-item.arrow {
padding-right: 90upx
}
.cu-list.menu-avatar>.cu-item .cu-avatar {
left: 30upx;
}
.cu-list.menu>.cu-item .content {
line-height: 1.6em;
flex: 1;
font-size: 30upx;
}
.cu-list.menu>.cu-item .content>view:first-child {
display: flex;
align-items: center;
.cu-list.menu>.cu-item.arrow:before {
position: absolute;
top: 0;
right: 30upx;
bottom: 0;
display: block;
margin: auto;
width: 30upx;
height: 30upx;
color: var(--grey);
content: "\e6a3";
text-align: center;
font-size: 34upx;
font-family: cuIcon;
line-height: 30upx
}
.cu-list.menu>.cu-item button.content {
padding: 0;
justify-content: flex-start;
background-color: transparent;
justify-content: flex-start
}
.cu-list.menu>.cu-item button.content::after {
display: none;
}
.cu-list.menu>.cu-item .content>text[class*="icon"] {
margin-right: 10upx;
display: inline-block;
width: 1.6em;
text-align: center;
}
.cu-list.menu>.cu-item .content>image {
margin-right: 10upx;
display: inline-block;
width: 1.6em;
height: 1.6em;
vertical-align: middle;
}
.cu-list.menu-avatar>.cu-item .action {
text-align: center;
}
.cu-list.menu-avatar>.cu-item .action view+view {
margin-top: 10upx;
}
.cu-list.menu>.cu-item.grayscale {
background-color: #f5f5f5;
}
.cu-list.menu>.cu-item .action .cu-tag:empty {
right: 10upx;
}
.cu-list.menu>.cu-item.arrow {
padding-right: 90upx;
}
.cu-list.menu>.cu-item.arrow::before {
font-family: "cuIcon";
display: block;
content: "\e6a3";
position: absolute;
font-size: 34upx;
color: var(--grey);
line-height: 30upx;
height: 30upx;
width: 30upx;
text-align: center;
top: 0upx;
bottom: 0;
right: 30upx;
margin: auto;
.cu-list.menu>.cu-item button.content:after {
display: none
}
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
border-color: #fff;
border-color: #fff
}
.cu-list.card-menu {
margin-left: 30upx;
margin-right: 30upx;
border-radius: 20upx;
overflow: hidden;
.cu-list.menu>.cu-item .content>view:first-child {
display: flex;
align-items: center
}
.cu-list.menu-avatar>.cu-item {
padding-left: 140upx;
height: 140upx;
.cu-list.menu>.cu-item .content>text[class*=icon] {
display: inline-block;
margin-right: 10upx;
width: 1.6em;
text-align: center
}
.cu-list.menu-avatar>.cu-item>.cu-avatar {
position: absolute;
left: 30upx;
.cu-list.menu>.cu-item .content>image {
display: inline-block;
margin-right: 10upx;
width: 1.6em;
height: 1.6em;
vertical-align: middle
}
.cu-list.menu-avatar>.cu-item .content view:first-child .text-cut {
max-width: calc(750upx - 320upx);
}
.cu-list.menu-avatar>.cu-item .flex .text-cut {
max-width: calc(750upx - 240upx);
}
.cu-list.menu-avatar.comment>.cu-item {
height: auto;
padding-top: 30upx;
padding-bottom: 30upx;
padding-left: 120upx;
}
.cu-list.menu-avatar.comment .cu-avatar {
align-self: flex-start;
.cu-list.menu>.cu-item .content {
font-size: 30upx;
line-height: 1.6em;
flex: 1
}
.cu-list.menu>.cu-item .content .cu-tag.sm {
font-size: 16upx;
line-height: 32upx;
display: inline-block;
margin-left: 10upx;
height: 28upx;
display: inline-block;
font-size: 16upx;
line-height: 32upx
}
.cu-list.grid {
text-align: center;
background: #fff;
.cu-list.menu>.cu-item .action .cu-tag:empty {
right: 10upx
}
.cu-list.menu {
display: block;
overflow: hidden
}
.cu-list.menu.sm-border>.cu-item:after {
left: 30upx;
width: calc(200% - 120upx)
}
.cu-list.grid>.cu-item {
display: flex;
flex-direction: column;
padding: 20upx 0 30upx;
position: relative;
display: flex;
padding: 20upx 0 30upx;
transition-duration: 0s;
flex-direction: column
}
.cu-list.grid>.cu-item [class*="icon"] {
display: block;
width: 100%;
position: relative;
font-size: 48upx;
margin-top: 20upx;
.cu-list.grid>.cu-item:after {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 200%;
height: 200%;
border-right: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-radius: inherit;
content: " ";
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none
}
.cu-list.grid>.cu-item text {
display: block;
color: #888;
margin-top: 10upx;
line-height: 40upx;
color: #888;
font-size: 26upx;
line-height: 40upx
}
.cu-list.grid>.cu-item [class*=icon] {
position: relative;
display: block;
margin-top: 20upx;
width: 100%;
font-size: 48upx
}
.cu-list.grid>.cu-item .cu-tag {
left: 50%;
right: auto;
margin-left: 20upx;
left: 50%;
margin-left: 20upx
}
.cu-list.grid>.cu-item::after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cu-list.grid.col-3>.cu-item:nth-child(3n)::after {
border-right-width: 0px;
}
.cu-list.grid.col-4>.cu-item:nth-child(4n)::after {
border-right-width: 0px;
}
.cu-list.grid.col-5>.cu-item:nth-child(5n)::after {
border-right-width: 0px;
}
.cu-list.grid.no-border {
padding: 20upx 10upx;
.cu-list.grid {
background-color: #fff;
text-align: center
}
.cu-list.grid.no-border>.cu-item {
padding-top: 10upx;
padding-bottom: 20upx;
padding-bottom: 20upx
}
.cu-list.grid.no-border>.cu-item::after {
border: none;
.cu-list.grid.no-border>.cu-item:after {
border: none
}
.cu-list>.cu-item {
transform: translateX(0upx);
transition: all 0.6s ease-in-out 0s;
.cu-list.grid.no-border {
padding: 20upx 10upx
}
.cu-list>.cu-item .move {
display: flex;
width: 260upx;
height: 100%;
position: absolute;
right: 0;
transform: translateX(100%);
.cu-list.grid.col-3>.cu-item:nth-child(3n):after,
.cu-list.grid.col-4>.cu-item:nth-child(4n):after,
.cu-list.grid.col-5>.cu-item:nth-child(5n):after {
border-right-width: 0
}
.cu-list>.cu-item.move-cur {
transform: translateX(-260upx);
.cu-list.card-menu {
overflow: hidden;
margin-right: 30upx;
margin-left: 30upx;
border-radius: 20upx
}
.cu-list>.cu-item .move view {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* ==================
操作条
@@ -1734,7 +1745,7 @@ button.icon.lg {
}
.cu-bar .search-form {
background: #f5f5f5;
background-color: #f5f5f5;
line-height: 64upx;
height: 64upx;
font-size: 24upx;
@@ -1975,7 +1986,7 @@ button.icon.lg {
.cu-custom .cu-bar {
min-height: 0px;
/* #ifndef H5 */
/* #ifdef MP */
padding-right: 220upx;
/* #endif */
box-shadow: 0upx 0upx 0upx;
@@ -2060,7 +2071,7 @@ button.icon.lg {
.cu-timeline {
display: block;
background: #fff;
background-color: #fff;
}
.cu-timeline .cu-time {
@@ -2088,7 +2099,7 @@ button.icon.lg {
display: block;
position: absolute;
width: 1upx;
background: #ddd;
background-color: #ddd;
left: 60upx;
height: 100%;
top: 0;
@@ -2101,7 +2112,7 @@ button.icon.lg {
position: absolute;
top: 36upx;
z-index: 9;
background: #fff;
background-color: #fff;
width: 50upx;
height: 50upx;
text-align: center;
@@ -2115,7 +2126,7 @@ button.icon.lg {
}
.cu-timeline>.cu-item[class*="icon"]::before {
background: #fff;
background-color: #fff;
width: 50upx;
height: 50upx;
text-align: center;
@@ -2132,7 +2143,7 @@ button.icon.lg {
}
.cu-timeline>.cu-item>.content:not([class*="bg-"]) {
background: #f1f1f1;
background-color: #f1f1f1;
color: #666;
}
@@ -2185,7 +2196,7 @@ button.icon.lg {
}
.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
background: #fff;
background-color: #fff;
color: #666;
}
@@ -2279,7 +2290,7 @@ button.icon.lg {
.cu-card>.cu-item {
display: block;
background: #fff;
background-color: #fff;
overflow: hidden;
border-radius: 10upx;
margin: 30upx;
@@ -2358,7 +2369,7 @@ button.icon.lg {
/* card.dynamic>.cu-item .comment {
padding: 20upx;
background: #f1f1f1;
background-color: #f1f1f1;
margin: 0 30upx 30upx;
border-radius: 6upx;
} */
@@ -2410,7 +2421,7 @@ button.icon.lg {
==================== */
.cu-form-group {
background: #fff;
background-color: #fff;
padding: 1upx 30upx;
display: flex;
align-items: center;
@@ -2569,7 +2580,7 @@ button.icon.lg {
margin-right: auto;
width: 680upx;
max-width: 100%;
background: #f8f8f8;
background-color: #f8f8f8;
border-radius: 10upx;
overflow: hidden;
}
@@ -2622,7 +2633,7 @@ button.icon.lg {
swiper.square-dot .wx-swiper-dot,
swiper.square-dot .uni-swiper-dot {
background: #fff;
background-color: #fff;
opacity: 0.4;
width: 10upx;
height: 10upx;
@@ -2656,7 +2667,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
right: 0;
bottom: 0;
margin: auto;
background: #fff;
background-color: #fff;
border-radius: 20upx;
}
@@ -2725,7 +2736,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
bottom: 0;
left: 50%;
margin: auto;
transition: all 0.3s ease-in 0s;
transition: all 0.2s ease-in 0s;
opacity: 1;
}
@@ -3584,101 +3595,101 @@ scroll-view.cu-steps .cu-item {
.bg-red.light {
color: var(--red);
background: #fadbd9;
background-color: #fadbd9;
}
.bg-orange.light {
color: var(--orange);
background: #fde6d2;
background-color: #fde6d2;
}
.bg-yellow.light {
color: var(--yellow);
background: #fef2ce;
background-color: #fef2ce;
}
.bg-olive.light {
color: var(--olive);
background: #e8f4d9;
background-color: #e8f4d9;
}
.bg-green.light {
color: var(--green);
background: #d7f0db;
background-color: #d7f0db;
}
.bg-cyan.light {
color: var(--cyan);
background: #d2f1f0;
background-color: #d2f1f0;
}
.bg-blue.light {
color: var(--blue);
background: #cce6ff;
background-color: #cce6ff;
}
.bg-purple.light {
color: var(--purple);
background: #e1d7f0;
background-color: #e1d7f0;
}
.bg-mauve.light {
color: var(--mauve);
background: #ebd4ef;
background-color: #ebd4ef;
}
.bg-pink.light {
color: var(--pink);
background: #f9d7ea;
background-color: #f9d7ea;
}
.bg-brown.light {
color: var(--brown);
background: #ede1d9;
background-color: #ede1d9;
}
.bg-grey.light {
color: var(--grey);
background: #e7ebed;
background-color: #e7ebed;
}
.bg-gray.light {
color: #666;
background: #fadbd9;
background-color: #fadbd9;
}
.bg-gray.light {
color: #888;
background: #f1f1f1;
background-color: #f1f1f1;
}
.bg-gradual-red {
background-image:var(--gradualRed);
background-image: var(--gradualRed);
color: #fff;
}
.bg-gradual-orange {
background-image:var(--gradualOrange);
background-image: var(--gradualOrange);
color: #fff;
}
.bg-gradual-green {
background-image:var(--gradualGreen);
background-image: var(--gradualGreen);
color: #fff;
}
.bg-gradual-purple {
background-image:var(--gradualPurple);
background-image: var(--gradualPurple);
color: #fff;
}
.bg-gradual-pink {
background-image:var(--gradualPink);
background-image: var(--gradualPink);
color: #fff;
}
.bg-gradual-blue {
background-image:var(--gradualBlue);
background-image: var(--gradualBlue);
color: #fff;
}

BIN
Colorui-UniApp/images/BasicsBg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
Colorui-UniApp/images/componentBg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

BIN
Colorui-UniApp/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
Colorui-UniApp/images/tabbar/about.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
Colorui-UniApp/images/tabbar/about_cur.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
Colorui-UniApp/images/tabbar/basics.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
Colorui-UniApp/images/tabbar/basics_cur.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
Colorui-UniApp/images/tabbar/component.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
Colorui-UniApp/images/tabbar/component_cur.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
Colorui-UniApp/images/tabbar/plugin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
Colorui-UniApp/images/tabbar/plugin_cur.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

12
Colorui-UniApp/main.js
View File

@@ -7,8 +7,11 @@ Vue.component('basics',basics)
import components from './pages/component/home.vue'
Vue.component('components',components)
import custom from './pages/custom/custom.vue'
Vue.component('custom',custom)
import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
Vue.config.productionTip = false
@@ -18,3 +21,8 @@ const app = new Vue({
...App
})
app.$mount()

338
Colorui-UniApp/pages.json
View File

@@ -1,161 +1,181 @@
{
"pages" : [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/index/index",
"style" : {
"navigationBarTitleText" : "主页面"
}
},
{
"path" : "pages/basics/home",
"style" : {
"navigationBarTitleText" : "基础元素"
}
},
{
"path" : "pages/basics/layout",
"style" : {
"navigationBarTitleText" : "布局"
}
},
{
"path" : "pages/basics/background",
"style" : {
"navigationBarTitleText" : "背景"
}
},
{
"path" : "pages/basics/text",
"style" : {
"navigationBarTitleText" : "文本"
}
},
{
"path" : "pages/basics/icon",
"style" : {
"navigationBarTitleText" : "图标"
}
},
{
"path" : "pages/basics/button",
"style" : {
"navigationBarTitleText" : "按钮"
}
},
{
"path" : "pages/basics/design",
"style" : {
"navigationBarTitleText" : "按钮/设计"
}
},
{
"path" : "pages/basics/tag",
"style" : {
"navigationBarTitleText" : "标签"
}
},
{
"path" : "pages/basics/avatar",
"style" : {
"navigationBarTitleText" : "头像"
}
},
{
"path" : "pages/basics/progress",
"style" : {
"navigationBarTitleText" : "进度条"
}
},
{
"path" : "pages/basics/shadow",
"style" : {
"navigationBarTitleText" : "边框阴影"
}
},
{
"path" : "pages/basics/loading",
"style" : {
"navigationBarTitleText" : "加载"
}
},
{
"path" : "pages/component/home",
"style" : {
"navigationBarTitleText" : "交互组件"
}
},
{
"path" : "pages/component/bar",
"style" : {
"navigationBarTitleText" : "操作条"
}
},
{
"path" : "pages/custom/custom",
"style" : {
"navigationBarTitleText" : "列表"
}
},
{
"path" : "pages/component/nav",
"style" : {
"navigationBarTitleText" : "导航栏"
}
},
{
"path" : "pages/component/list",
"style" : {
"navigationBarTitleText" : "列表"
}
},
{
"path" : "pages/component/card",
"style" : {
"navigationBarTitleText" : "卡片"
}
},
{
"path" : "pages/component/form",
"style" : {
"navigationBarTitleText" : "表单"
}
},
{
"path" : "pages/component/timeline",
"style" : {
"navigationBarTitleText" : "时间轴"
}
},
{
"path" : "pages/component/chat",
"style" : {
"navigationBarTitleText" : "聊天"
}
},
{
"path" : "pages/component/swiper",
"style" : {
"navigationBarTitleText" : "轮播"
}
},
{
"path" : "pages/component/modal",
"style" : {
"navigationBarTitleText" : "模态框"
}
},
{
"path" : "pages/component/steps",
"style" : {
"navigationBarTitleText" : "步骤条"
}
}
],
"globalStyle" : {
"navigationBarBackgroundColor" : "#39b54a",
"navigationBarTitleText" : "ColorUi for UniApp",
"navigationStyle" : "custom",
"navigationBarTextStyle" : "white"
}
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页面"
}
},
{
"path": "pages/basics/home",
"style": {
"navigationBarTitleText": "基础元素"
}
},
{
"path": "pages/basics/layout",
"style": {
"navigationBarTitleText": "布局"
}
},
{
"path": "pages/basics/background",
"style": {
"navigationBarTitleText": "背景"
}
},
{
"path": "pages/basics/text",
"style": {
"navigationBarTitleText": "文本"
}
},
{
"path": "pages/basics/icon",
"style": {
"navigationBarTitleText": "图标"
}
},
{
"path": "pages/basics/button",
"style": {
"navigationBarTitleText": "按钮"
}
},
{
"path": "pages/basics/design",
"style": {
"navigationBarTitleText": "按钮/设计"
}
},
{
"path": "pages/basics/tag",
"style": {
"navigationBarTitleText": "标签"
}
},
{
"path": "pages/basics/avatar",
"style": {
"navigationBarTitleText": "头像"
}
},
{
"path": "pages/basics/progress",
"style": {
"navigationBarTitleText": "进度条"
}
},
{
"path": "pages/basics/shadow",
"style": {
"navigationBarTitleText": "边框阴影"
}
},
{
"path": "pages/basics/loading",
"style": {
"navigationBarTitleText": "加载"
}
},
{
"path": "pages/component/home",
"style": {
"navigationBarTitleText": "交互组件"
}
},
{
"path": "pages/component/bar",
"style": {
"navigationBarTitleText": "操作条"
}
},
{
"path": "pages/component/nav",
"style": {
"navigationBarTitleText": "导航栏"
}
},
{
"path": "pages/component/list",
"style": {
"navigationBarTitleText": "列表"
}
},
{
"path": "pages/component/card",
"style": {
"navigationBarTitleText": "卡片"
}
},
{
"path": "pages/component/form",
"style": {
"navigationBarTitleText": "表单"
}
},
{
"path": "pages/component/timeline",
"style": {
"navigationBarTitleText": "时间轴"
}
},
{
"path": "pages/component/chat",
"style": {
"navigationBarTitleText": "聊天"
}
},
{
"path": "pages/component/swiper",
"style": {
"navigationBarTitleText": "轮播"
}
},
{
"path": "pages/component/modal",
"style": {
"navigationBarTitleText": "模态框"
}
},
{
"path": "pages/component/steps",
"style": {
"navigationBarTitleText": "步骤条"
}
}, {
"path": "pages/plugin/home",
"style": {
"navigationBarTitleText": "插件扩展"
}
}, {
"path": "pages/plugin/indexes",
"style": {
"navigationBarTitleText": "索引列表"
}
}, {
"path": "pages/plugin/animation",
"style": {
"navigationBarTitleText": "微动画"
}
}, {
"path": "pages/plugin/drawer",
"style": {
"navigationBarTitleText": "全屏抽屉"
}
}, {
"path": "pages/plugin/verticalnav",
"style": {
"navigationBarTitleText": "垂直导航"
}
}
],
"globalStyle": {
"navigationBarBackgroundColor": "#39b54a",
"navigationBarTitleText": "ColorUi for UniApp",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
"usingComponts":true
}

2
Colorui-UniApp/pages/basics/avatar.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>头像</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">头像</block></cu-custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-blue"></text>头像形状

4
Colorui-UniApp/pages/basics/background.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>背景</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">背景</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class='icon-title text-blue'></text>深色背景
@@ -85,7 +85,7 @@
</view>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- #ifdef MP -->
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-blue"></text>视频背景

13
Colorui-UniApp/pages/basics/button.vue
View File

@@ -1,16 +1,15 @@
<template>
<view>
<custom>按钮
<block slot="right">
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">按钮</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-blue"></text>按钮形状
</view>
<view class="action">
<navigator class="action" url="design" hover-class="none">
<text class="icon-skinfill"></text>
<text class="text-df">设计</text>
</navigator>
</block>
</custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-blue"></text>按钮形状
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">

2
Colorui-UniApp/pages/basics/design.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom> 按钮 / 设计</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content"> 按钮 / 设计</block></cu-custom>
<view class="padding-xl">
<view class="box bg-white text-center radius">
<button class="cu-btn" :class="[border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color,round?'round':'',size,shadow?'shadow':'']">我是一个按钮</button>

26
Colorui-UniApp/pages/basics/home.vue
View File

@@ -1,14 +1,18 @@
<template>
<view>
<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png" mode="widthFix" class="response"></image>
<view class="nav-list">
<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text :class="'icon-' + item.icon"></text>
</navigator>
</view>
<scroll-view scroll-y class="page">
<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"
mode="widthFix" class="response"></image>
<view class="nav-list">
<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text :class="'icon-' + item.icon"></text>
</navigator>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</view>
</template>
@@ -83,5 +87,7 @@
</script>
<style>
.page {
height: 100vh;
}
</style>

2
Colorui-UniApp/pages/basics/icon.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>图标</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">图标</block></cu-custom>
<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
<view class="search-form round">
<text class="icon-search"></text>

2
Colorui-UniApp/pages/basics/layout.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>布局</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">布局</block></cu-custom>
<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
:data-id="index">

4
Colorui-UniApp/pages/basics/loading.vue
View File

@@ -1,12 +1,12 @@
<template>
<view>
<custom>加载
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
<block slot="right">
<view class="action">
<view class="cu-load load-icon" :class="!isLoad?'loading':'over'"></view>
</view>
</block>
</custom>
</cu-custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-blue"></text>背景

2
Colorui-UniApp/pages/basics/progress.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>进度条</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">进度条</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-blue"></text>进度条形状

2
Colorui-UniApp/pages/basics/shadow.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>边框阴影</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">边框阴影</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-blue"></text>边框

2
Colorui-UniApp/pages/basics/tag.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>标签</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">标签</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>标签形状

2
Colorui-UniApp/pages/basics/text.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom>文本</custom>
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">文本</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>文字大小

3
Colorui-UniApp/pages/component/bar.vue
View File

@@ -1,7 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">操作条</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">操作条</block></cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-green"></text>

4
Colorui-UniApp/pages/component/card.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">卡片</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">卡片</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-titles text-orange"></text> 案例类卡片
@@ -70,7 +70,7 @@
<text class="icon-messagefill margin-lr-xs"></text> 30
</view>
<view class="cu-list menu menu-avatar comment solids-top">
<view class="cu-list menu-avatar comment solids-top">
<view class="cu-item">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">

2
Colorui-UniApp/pages/component/chat.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">聊天</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">聊天</block></cu-custom>
<view class="cu-chat">
<view class="cu-item self">
<view class="main">

2
Colorui-UniApp/pages/component/form.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">表单</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">表单</block></cu-custom>
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>

25
Colorui-UniApp/pages/component/home.vue
View File

@@ -1,14 +1,17 @@
<template>
<view>
<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
<view class="nav-list">
<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text :class="'icon-' + item.icon"></text>
</navigator>
</view>
<scroll-view scroll-y class="page">
<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
<view class="nav-list">
<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<text :class="'icon-' + item.icon"></text>
</navigator>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</view>
</template>
@@ -83,5 +86,7 @@
</script>
<style>
.page {
height: 100vh;
}
</style>

26
Colorui-UniApp/pages/component/list.vue
View File

@@ -1,6 +1,9 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">列表</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">列表</block>
</cu-custom>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 宫格列表
@@ -171,14 +174,14 @@
<text class="icon-title text-orange "></text> 消息列表
</view>
</view>
<view class="cu-list menu menu-avatar">
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text> </view>
</view>
<view class="action">
@@ -209,9 +212,8 @@
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view>莫甘娜</view>
<view class="text-gray text-sm">
凯尔，你被自己的光芒变的盲目！</view>
<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
@@ -221,9 +223,10 @@
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view><text class="text-cut">伊泽瑞尔</text> <view class="cu-tag round bg-orange sm">断开连接...</view></view>
<view class="text-gray text-sm">
等我回来一个打十个</view>
<view><text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view>
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
@@ -239,9 +242,8 @@
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm">
伊泽瑞尔：
<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>

2
Colorui-UniApp/pages/component/modal.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">模态窗口</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">模态窗口</block></cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 普通窗口

2
Colorui-UniApp/pages/component/nav.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">导航栏</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">导航栏</block></cu-custom>
<view v-for="(item,index) in 10" :key="index" v-if="index==TabCur" class="bg-grey padding margin text-center">
Tab{{index}}
</view>

2
Colorui-UniApp/pages/component/steps.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">步骤条</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">步骤条</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 基本用法

33
Colorui-UniApp/pages/component/swiper.vue
View File

@@ -1,6 +1,8 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">轮播图</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
<block slot="content">轮播图</block>
</cu-custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-pink"></text> 全屏限高轮播
@@ -33,23 +35,17 @@
</swiper>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 堆叠式轮播
<text class="icon-title text-pink"></text> 堆叠式轮播
</view>
</view>
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
<!-- #ifdef H5 -->
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'upx',zIndex:item.zIndex}]">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'rpx',zIndex:item.zIndex}]">
<!-- #endif -->
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
<view class="swiper-item">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</view>
</view>
</view>
</view>
</template>
@@ -64,13 +60,12 @@
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
// #ifdef MP-WEIXIN
// #ifdef MP
type: 'video',
url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
// #endif
// #ifndef MP-WEIXIN
// #ifndef MP
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
// #endif
@@ -97,7 +92,7 @@
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
dotStyle: false,
towerStart:0,
towerStart: 0,
direction: ''
};
},
@@ -141,27 +136,33 @@
if (direction == 'right') {
let mLeft = list[0].mLeft;
let zIndex = list[0].zIndex;
for (let i = 1; i < list.length; i++) {
for (let i = 1; i < this.swiperList.length; i++) {
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
console.log('end')
}
this.swiperList[list.length - 1].mLeft = mLeft;
this.swiperList[list.length - 1].zIndex = zIndex;
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = list.length - 1; i > 0; i--) {
for (let i = this.swiperList.length - 1; i > 0; i--) {
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
}
this.swiperList[0].mLeft = mLeft;
this.swiperList[0].zIndex = zIndex;
}
this.direction = ""
this.swiperList = this.swiperList
},
}
}
</script>
<style>
.tower-swiper .tower-item {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100upx - 150upx);
z-index: var(--index);
}
</style>

2
Colorui-UniApp/pages/component/timeline.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<custom bgColor="bg-gradual-pink">时间轴</custom>
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">时间轴</block></cu-custom>
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class="cu-item cur icon-noticefill">

8
Colorui-UniApp/pages/index/index.vue
View File

@@ -2,7 +2,7 @@
<view>
<basics v-if="PageCur=='basics'"></basics>
<components v-if="PageCur=='component'"></components>
<view class="cu-tabbar-height"></view>
<plugin v-if="PageCur=='plugin'"></plugin>
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="basics">
<view class='icon-cu-image'>
@@ -16,6 +16,12 @@
</view>
<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
</view>
<view class="action" @click="NavChange" data-cur="plugin">
<view class='icon-cu-image'>
<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
</view>
</view>
</view>
</template>

145
Colorui-UniApp/pages/plugin/animation.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<view>
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" :isBack="true"><block slot="backText">返回</block>
<block slot="content">微动画</block>
</cu-custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-orange"></text> 默认效果
</view>
</view>
<view class="padding-sm">
<view class="flex flex-wrap justify-around">
<button class="cu-btn margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name?'animation-' +item.name :'']"
@tap="Toggle" :data-class="item.name" v-for="(item,index) in list" :key="index">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-orange"></text> 反向动画
</view>
</view>
<view class="padding-sm">
<view class="flex flex-wrap justify-around">
<button class="cu-btn animation-reverse margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name+'s'?'animation-' +item.name:'']"
@tap="Toggle" :data-class="item.name+'s'" v-for="(item,index) in list" :key="index">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-orange"></text> 延迟执行
</view>
<view class="action">
<button class="cu-btn bg-cyan shadow" @tap="ToggleDelay">开始执行</button>
</view>
</view>
<view class="padding-sm">
<view class="flex flex-wrap justify-around">
<button class="margin-sm basis-sm shadow cu-btn" :class="['bg-' + item.color,toggleDelay?'animation-slide-bottom':'']"
:style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in list" :key="index">0.{{index+1}}s</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-orange"></text> Gif动画
</view>
</view>
<view class="margin radius bg-gradual-green shadow-blur">
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx"></image>
</view>
<view class="margin flex">
<view class="bg-black flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
</view>
<view class="margin flex">
<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
</view>
<view class="margin flex">
<view class="bg-white flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
<view class="bg-black flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
animation:'',
list: [{
name: 'fade',
color: 'red'
},
{
name: 'scale-up',
color: 'orange'
},
{
name: 'scale-down',
color: 'olive'
},
{
name: 'slide-top',
color: 'green'
}, {
name: 'slide-bottom',
color: 'cyan'
},
{
name: 'slide-left',
color: 'blue'
},
{
name: 'slide-right',
color: 'purple'
},
{
name: 'shake',
color: 'mauve'
}
],
toggleDelay: false
};
},
methods: {
Toggle(e) {
var anmiaton = e.currentTarget.dataset.class;
this.animation= anmiaton;
setTimeout(()=>{
this.animation= '';
}, 1000)
},
ToggleDelay() {
this.toggleDelay= true;
setTimeout(()=>{
this.toggleDelay= false
}, 1000)
}
},
}
</script>
<style>
@import "../../colorui/animation.css";
image[class*="gif-"] {
border-radius: 6upx;
display: block;
}
</style>

170
Colorui-UniApp/pages/plugin/drawer.vue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<view class="bg-gradual-blue">
<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block>
<block slot="content">全屏抽屉</block>
</cu-custom>
<view class='padding margin text-center'>
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
打开抽屉
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
<view class="content">
<text class="icon-github text-grey"></text>
<text class="text-grey">{{index +1}}</text>
</view>
</view>
</view>
<view class='padding margin text-center'>
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
打开抽屉
</view>
</view>
</scroll-view>
<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
<text class="icon-pullright"></text>
</view>
<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
<view class="content">
<text class="icon-github text-grey"></text>
<text class="text-grey">{{index +1}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
modalName:null
};
},
methods: {
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}
},
}
</script>
<style>
page {
background-image: var(--gradualBlue);
width: 750upx;
overflow: hidden;
}
.DrawerPage {
position: absolute;
width: 100vw;
height: 100vh;
left: 0vw;
background-color: #f1f1f1;
transition: all 0.6s;
}
.DrawerPage.show {
transform: scale(0.9, 0.9);
left: 85vw;
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
transform-origin: 0;
}
.DrawerWindow {
position: absolute;
width: 85vw;
height: 100vh;
left: 0;
top: 0;
transform: scale(0.9, 0.9) translateX(-100%);
opacity: 0;
pointer-events: none;
transition: all 0.6s;
padding: 100upx 0;
}
.DrawerWindow.show {
transform: scale(1, 1) translateX(0%);
opacity: 1;
pointer-events: all;
}
.DrawerClose {
position: absolute;
width: 40vw;
height: 100vh;
right: 0;
top: 0;
color: transparent;
padding-bottom: 30upx;
display: flex;
align-items: flex-end;
justify-content: center;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
letter-spacing: 5px;
font-size: 50upx;
opacity: 0;
pointer-events: none;
transition: all 0.6s;
}
.DrawerClose.show {
opacity: 1;
pointer-events: all;
width: 15vw;
color: #fff;
}
.DrawerPage .cu-bar.tabbar .action button.icon {
width: 64upx;
height: 64upx;
line-height: 64upx;
margin: 0;
display: inline-block;
}
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
margin: 0;
}
.DrawerPage .nav {
flex: 1;
}
.DrawerPage .nav .cu-item.cur {
border-bottom: 0;
position: relative;
}
.DrawerPage .nav .cu-item.cur::after {
content: "";
width: 10upx;
height: 10upx;
background-color: currentColor;
position: absolute;
bottom: 10upx;
border-radius: 10upx;
left: 0;
right: 0;
margin: auto;
}
.DrawerPage .cu-bar.tabbar .action {
flex: initial;
}
</style>

107
Colorui-UniApp/pages/plugin/home.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<view>
<scroll-view scroll-y class="page">
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
<block slot="content">
<image src="/static/cjkz.png" mode="widthFix"></image>
</block>
</cu-custom>
<view class="cu-card">
<view class="cu-item bg-img shadow-blur" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="toChild" :data-url="item.url"
v-for="(item,index) in list" :key="index">
<view class="cardTitle">
{{item.title}}
</view>
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar,
list: [{
title: '索引列表',
img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
url: '../plugin/indexes'
},
{
title: '微动画',
img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
url: '../plugin/animation'
},
{
title: '全屏抽屉',
img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
url: '../plugin/drawer'
},
{
title: '垂直导航',
img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
url: '../plugin/verticalnav'
}
]
};
},
methods: {
toChild(e) {
uni.navigateTo({
url: e.currentTarget.dataset.url
})
},
},
}
</script>
<style>
.page {
height: 100vh;
}
.cu-bar .content image {
height: 60upx;
width: 240upx;
}
.cardTitle {
color: #fff;
padding: 90upx 60upx;
font-size: 40upx;
font-weight: 300;
transform: skew(-10deg, 0deg);
position: relative;
text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
}
.cardTitle::before {
content: "";
position: absolute;
width: 60upx;
height: 6upx;
border-radius: 20upx;
background-color: #fff;
display: block;
top: 60upx;
left: 50upx;
transform: skew(10deg, 0deg);
}
.cardTitle::after {
content: "";
position: absolute;
width: 140upx;
border-radius: 6upx;
height: 24upx;
background-color: #fff;
display: block;
bottom: 76upx;
left: 90upx;
transform: skew(10deg, 0deg);
opacity: 0.1;
}
</style>

197
Colorui-UniApp/pages/plugin/indexes.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<view>
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true"><block slot="backText">返回</block>
<block slot="content">索引</block>
</cu-custom>
<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
<view class="search-form round">
<text class="icon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
</view>
</view>
<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
:scroll-with-animation="true" :enable-back-to-top="true" @scroll="scroll">
<block v-for="(item,index) in list" :key="index">
<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
<view class="padding">{{item.name}}</view>
<view class="cu-list menu menu-avatar no-padding">
<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
<view class="cu-avatar round lg">{{item.name}}</view>
<view class="content">
<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
<view class="text-gray text-sm">
有{{sub+2}}个主子需要伺候
</view>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
</view>
</view>
<!--选择显示-->
<view v-show="!hidden" class="indexToast">
{{listCur}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar,
hidden: true,
listCurID: '',
list: [],
listCur: '',
};
},
onLoad() {
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
}
this.list = list;
this.listCur = list[0];
},
onReady() {
let that = this;
uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
that.boxTop = res.top
}).exec();
uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
that.barTop = res.top
}).exec()
},
methods: {
//获取文字信息
getCur(e) {
this.hidden = false;
this.listCur = this.list[e.target.id].name;
},
setCur(e) {
this.hidden = true;
this.listCur = this.listCur
},
//滑动选择Item
tMove(e) {
let y = e.touches[0].clientY,
offsettop = this.boxTop,
that = this;
//判断选择区域,只有在选择区才会生效
if (y > offsettop) {
let num = parseInt((y - offsettop) / 20);
this.listCur = that.list[num].name
};
},
//触发全部开始选择
tStart() {
this.hidden = false
},
//触发结束选择
tEnd() {
this.hidden = true;
this.listCurID = this.listCur
},
indexSelect(e) {
let that = this;
let barHeight = this.barHeight;
let list = this.list;
let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
for (let i = 0; i < list.length; i++) {
if (scrollY < i + 1) {
that.listCur = list[i].name;
that.movableY = i * 20
return false
}
}
}
}
}
</script>
<style>
page {
padding-top: 100upx;
}
.indexes {
position: relative;
}
.indexBar {
position: fixed;
right: 0px;
bottom: 0px;
padding: 20upx 20upx 20upx 60upx;
display: flex;
align-items: center;
}
.indexBar .indexBar-box {
width: 40upx;
height: auto;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.indexBar-item {
flex: 1;
width: 40upx;
height: 40upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24upx;
color: #888;
}
movable-view.indexBar-item {
width: 40upx;
height: 40upx;
z-index: 9;
position: relative;
}
movable-view.indexBar-item::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 10upx;
height: 20upx;
width: 4upx;
background-color: #f37b1d;
}
.indexToast {
position: fixed;
top: 0;
right: 80upx;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100upx;
height: 100upx;
border-radius: 10upx;
margin: auto;
color: #fff;
line-height: 100upx;
text-align: center;
font-size: 48upx;
}
</style>

223
Colorui-UniApp/pages/plugin/verticalnav.vue Normal file
View File

@@ -0,0 +1,223 @@
<template>
<view>
<view class=" fixed ">
<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
<block slot="backText">返回</block>
<block slot="content">垂直导航</block>
</cu-custom>
</view>
<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
duration="500">
<swiper-item v-for="(item,index) in 4" :key="index">
<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="VerticalBox">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
:data-id="index">
Tab-{{item.name}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)"
:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
<view class="cu-bar solid-bottom bg-white">
<view class="action">
<text class="icon-title text-green"></text> Tab-{{item.name}}</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text> </view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
<view class="cu-tag badge">99+</view>
</view>
<view class="content">
<view class="text-grey">
<text class="text-cut">瓦洛兰之盾-塔里克</text>
<view class="cu-tag round bg-orange sm">战士</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
</view>
<view class="cu-item ">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
<view class="content">
<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item grayscale">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
<view class="content">
<view><text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view>
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-red sm">5</view>
</view>
</view>
<view class="cu-item cur">
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
<view class="cu-tag badge"></view>
</view>
<view class="content">
<view>
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true
};
},
onLoad() {
uni.showLoading({
title: '加载中...',
mask: true
});
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
list[i].id = i;
}
this.list = list;
this.listCur = list[0];
},
onReady() {
uni.hideLoading()
},
methods: {
TabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.id;
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
},
VerticalMain(e) {
let that = this;
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.list.length; i++) {
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
view.fields({
size: true
}, data => {
this.list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.list[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.list.length; i++) {
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
this.verticalNavTop = (this.list[i].id - 1) * 50
this.tabCur = this.list[i].id
console.log(scrollTop)
return false
}
}
}
},
}
</script>
<style>
.fixed {
position: fixed;
z-index: 99;
}
.VerticalNav.nav {
width: 200upx;
white-space: initial;
}
.VerticalNav.nav .cu-item {
width: 100%;
text-align: center;
background-color: #fff;
margin: 0;
border: none;
height: 50px;
position: relative;
}
.VerticalNav.nav .cu-item.cur {
background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
content: "";
width: 8upx;
height: 30upx;
border-radius: 10upx 0 0 10upx;
position: absolute;
background-color: currentColor;
top: 0;
right: 0upx;
bottom: 0;
margin: auto;
}
.VerticalBox {
display: flex;
}
.VerticalMain {
background-color: #f1f1f1;
}
</style>

BIN
Colorui-UniApp/static/cjkz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB