mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
v2.1.2
This commit is contained in:
Weilanwl
@@ -1,74 +1,70 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'></text> 微动画
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">微动画</view>
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 默认效果
|
||||
<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 bg-{{item.color}} animation-{{animation==item.name? item.name :""}} margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
|
||||
<view class="flex flex-wrap justify-around">
|
||||
<button class="cu-btn bg-{{item.color}} animation-{{animation==item.name?item.name:''}} margin-sm basis-sm shadow" bindtap="toggle" data-class="{{item.name}}" wx:for="{{list}}" wx:key="{{index}}">{{item.name}}</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 反向动画
|
||||
<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 bg-{{item.color}} animation-{{animation==item.name+'s'?item.name:''}} animation-reverse margin-sm basis-sm shadow" bindtap="toggle" data-class="{{item.name+'s'}}" wx:for="{{list}}" wx: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" bindtap="toggleDelay">开始执行</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="padding-sm">
|
||||
<view class='flex flex-wrap justify-around'>
|
||||
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name+"s"? item.name :""}} animation-reverse margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
|
||||
<view class="flex flex-wrap justify-around">
|
||||
<button class="bg-{{item.color}} cu-btn {{toggleDelay?'animation-slide-bottom':''}} margin-sm basis-sm shadow" style="animation-delay: {{(index+1)*0.1}}s;" wx:for="{{list}}" wx: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> 延迟执行
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="padding-sm">
|
||||
<view class='flex flex-wrap justify-around'>
|
||||
<button class=' bg-{{item.color}} cu-btn {{toggleDelay?"animation-slide-bottom":""}} margin-sm basis-sm shadow' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">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 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>
|
||||
<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 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 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 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 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 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 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>
|
||||
@@ -1,182 +1,6 @@
|
||||
image[class*="gif-"]{
|
||||
@import "../../../colorui/animation.wxss";
|
||||
|
||||
image[class*="gif-"] {
|
||||
border-radius: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gif-black{
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.gif-white{
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
|
||||
[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)
|
||||
}
|
||||
}
|
||||
@@ -1,99 +1,37 @@
|
||||
<view class="DrawerPage {{modalName=='viewModal'?'show':''}}">
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar tabbar bg-black fixed" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<view class="action text-center" style='width: 100rpx'>
|
||||
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='cu-btn icon-my icon bg-green shadow'> </button>
|
||||
<block wx:else>
|
||||
<view class="cu-avatar round" style="background-image:url({{userInfo.avatarUrl}})" bindtap="showModal" data-target="viewModal"></view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 样式1 -->
|
||||
<block wx:if="{{1==TabCur?'cur':''}}">
|
||||
<view class="action {{1==TabCur?'cur':''}}" bindtap='tabSelect' data-id="1">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/component{{1==TabCur?"_cur":""}}.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action {{2==TabCur?'cur':''}}" bindtap='tabSelect' data-id="2">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/plugin{{2==TabCur?"_cur":""}}.png'></image>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action {{3==TabCur?'cur':''}}" bindtap='tabSelect' data-id="3">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/about{{3==TabCur?"_cur":""}}.png'></image>
|
||||
<view class='cu-tag badge'></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 样式2 -->
|
||||
<block wx:if="{{1!=TabCur?'cur':''}}">
|
||||
<scroll-view scroll-x class="nav" scroll-with-animation scroll-left="{{scrollLeft}}" style='width:calc(100% - 440rpx)'>
|
||||
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='padding margin text-center'>
|
||||
<view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
|
||||
<view class='text-xl margin-xl'>点击头像打开抽屉</view>
|
||||
<navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'> </text> 返回上一页
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap='hideModal'>
|
||||
<text class='icon-pullright'></text>
|
||||
</view>
|
||||
<view class="DrawerWindow {{modalName=='viewModal'?'show':''}}">
|
||||
<view class='padding-xl text-center text-white'>
|
||||
<image src='/images/logo.png' class='response' mode='widthFix' style='width:200rpx;margin-top:100rpx'></image>
|
||||
<view class='text-xl'>ColorUI组件库
|
||||
<text class='text-df'>v2.0</text>
|
||||
</view>
|
||||
<view class='margin-top-sm'>
|
||||
<text>By:文晓港</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||
<view class="cu-item arrow">
|
||||
<view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
|
||||
<text class='icon-github text-grey'></text>
|
||||
<text class='text-grey'>GitHub</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class='content' url='../about/about' hover-class='none'>
|
||||
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
|
||||
<text class='text-grey'>关于ColorUI组件库</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class='content' url='../log/log' hover-class='none'>
|
||||
<text class='icon-formfill text-green'></text>
|
||||
<text class='text-grey'>日志</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<view class='content' bindtap="showQrcode">
|
||||
<text class='icon-appreciatefill text-red'></text>
|
||||
<text class='text-grey'>赞赏支持</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<button class='cu-btn content' open-type='feedback'>
|
||||
<text class='icon-writefill text-cyan'></text>
|
||||
<text class='text-grey'>意见反馈</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class='content' url='../test/list' hover-class='none'>
|
||||
<text class='icon-creativefill text-orange'></text>
|
||||
<text class='text-grey'>Bug测试</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="DrawerPage {{modalName=='viewModal'?'show':''}}">
|
||||
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view>
|
||||
<view slot="content">全屏抽屉</view>
|
||||
</cu-custom>
|
||||
<view class='padding margin text-center'>
|
||||
<view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="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" wx:for="{{20}}" wx: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' bindtap="showModal" data-target="viewModal">
|
||||
打开抽屉
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap="hideModal">
|
||||
<text class="icon-pullright"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="DrawerWindow {{modalName=='viewModal'?'show':''}}">
|
||||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||
<view class="cu-item arrow" wx:for="{{20}}" wx:key="index">
|
||||
<view class="content">
|
||||
<text class="icon-github text-grey"></text>
|
||||
<text class="text-grey">{{index +1}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -1,15 +1,16 @@
|
||||
page {
|
||||
background-color: #555;
|
||||
background-size: 100%;
|
||||
background-image: var(--gradualBlue);
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.DrawerPage {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0vw;
|
||||
background-color: #f1f1f1;
|
||||
transition: all 0.6s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.DrawerPage.show {
|
||||
@@ -28,7 +29,7 @@ page {
|
||||
transform: scale(0.9, 0.9) translateX(-100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.6s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.DrawerWindow.show {
|
||||
@@ -42,22 +43,23 @@ page {
|
||||
width: 40vw;
|
||||
height: 100vh;
|
||||
right: 0;
|
||||
top: 0;
|
||||
top: 0;
|
||||
color: transparent;
|
||||
padding-bottom: 30rpx;
|
||||
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));
|
||||
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: 50rpx;
|
||||
font-size: 50rpx;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.6s;
|
||||
pointer-events: none;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.DrawerClose.show {
|
||||
|
||||
.DrawerClose.show {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
pointer-events: all;
|
||||
width: 15vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,38 @@
|
||||
const app = getApp();
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
},
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
list: [{
|
||||
title: '索引列表',
|
||||
img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
|
||||
url: '../indexes/indexes'
|
||||
url: '/indexes/indexes'
|
||||
},
|
||||
{
|
||||
title: '微动画',
|
||||
img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
|
||||
url: '../animation/animation'
|
||||
url: '/animation/animation'
|
||||
},
|
||||
{
|
||||
title: '全屏抽屉',
|
||||
img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
|
||||
url: '../drawer/drawer'
|
||||
url: '/drawer/drawer'
|
||||
},
|
||||
{
|
||||
title: '垂直导航',
|
||||
img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
|
||||
url: '../verticalnav/verticalnav'
|
||||
url: '/verticalnav/verticalnav'
|
||||
}
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
toChild(e) {
|
||||
wx.navigateTo({
|
||||
url: e.currentTarget.dataset.url
|
||||
url: '/pages/plugin' + e.currentTarget.dataset.url
|
||||
})
|
||||
},
|
||||
},
|
||||
pageLifetimes: {
|
||||
show() {
|
||||
if (typeof this.getTabBar === 'function' &&
|
||||
this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 2
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1 +1,3 @@
|
||||
{}
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg);">
|
||||
<view class='content' style='top:{{StatusBar}}px;'>
|
||||
<image src="/images/cjkz.png" mode='widthFix'></image>
|
||||
<scroll-view scroll-y class="scrollPage">
|
||||
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
|
||||
<view slot="content">
|
||||
<image src="/images/cjkz.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</cu-custom>
|
||||
<view class="cu-card">
|
||||
<view class="cu-item bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
|
||||
<view class="cardTitle">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-card">
|
||||
<view class="cu-item bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
|
||||
<view class="cardTitle">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-tabbar-height'></view>
|
||||
<view class="cu-tabbar-height"></view>
|
||||
</scroll-view>
|
||||
@@ -1,28 +1,26 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'></text> 索引
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">索引</view>
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
|
||||
<view class='search-form round'>
|
||||
<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 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-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">
|
||||
<block wx:for="{{list}}" wx:key>
|
||||
<view class='padding indexItem-{{list[index]}}' id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{list[index]}}</view>
|
||||
<view class="cu-list menu menu-avatar no-padding">
|
||||
<view class="padding indexItem-{{list[index]}}" id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{list[index]}}</view>
|
||||
<view class="cu-list menu-avatar no-padding">
|
||||
<view class="cu-item" wx:for="{{2}}" wx:key wx:for-index="sub">
|
||||
<view class="cu-avatar round lg">{{list[index]}}</view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>{{list[index]}}<text class='text-abc'>{{list[sub]}}</text>君</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<view class="content">
|
||||
<view class="text-grey">{{list[index]}}
|
||||
<text class="text-abc">{{list[sub]}}</text>君</view>
|
||||
<view class="text-gray text-sm">
|
||||
有{{sub+2}}个主子需要伺候
|
||||
</view>
|
||||
</view>
|
||||
@@ -30,9 +28,9 @@
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class='indexBar' style='height:calc(100vh - {{CustomBar}}px - 50px)'>
|
||||
<view class='indexBar-box' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
|
||||
<view class="indexBar-item " wx:for="{{list}}" wx:key id='{{index}}' bindtouchstart="getCur" bindtouchend="setCur" >{{list[index]}}</view>
|
||||
<view class="indexBar" style="height:calc(100vh - {{CustomBar}}px - 50px)">
|
||||
<view class="indexBar-box" bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
|
||||
<view class="indexBar-item" wx:for="{{list}}" wx:key id="{{index}}" bindtouchstart="getCur" bindtouchend="setCur">{{list[index]}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--选择显示-->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
page {
|
||||
padding-top: 50px;
|
||||
padding-top: 100rpx;
|
||||
}
|
||||
|
||||
.indexes {
|
||||
@@ -10,36 +10,37 @@ page {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
padding: 10px 10px 10px 30px;
|
||||
padding: 20rpx 20rpx 20rpx 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.indexBar .indexBar-box {
|
||||
width: 20px;
|
||||
width: 40rpx;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.indexBar-item {
|
||||
flex: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
movable-view.indexBar-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
z-index: 9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
movable-view.indexBar-item::before {
|
||||
@@ -47,23 +48,24 @@ movable-view.indexBar-item::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
height: 10px;
|
||||
width: 2px;
|
||||
top: 10rpx;
|
||||
height: 20rpx;
|
||||
width: 4rpx;
|
||||
background-color: #f37b1d;
|
||||
}
|
||||
.indexToast{
|
||||
|
||||
.indexToast {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 40px;
|
||||
right: 80rpx;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: auto;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
@@ -5,15 +5,66 @@ Page({
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
Custom: app.globalData.Custom,
|
||||
TabCur: 0,
|
||||
VerticalNavTop: 0
|
||||
MainCur: 0,
|
||||
VerticalNavTop: 0,
|
||||
list: [],
|
||||
load: true
|
||||
},
|
||||
onLoad() {
|
||||
wx.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.setData({
|
||||
list: list,
|
||||
listCur: list[0]
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
wx.hideLoading()
|
||||
},
|
||||
tabSelect(e) {
|
||||
this.setData({
|
||||
TabCur: e.currentTarget.dataset.id,
|
||||
MainCur: e.currentTarget.dataset.id,
|
||||
VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
|
||||
})
|
||||
},
|
||||
VerticalMain(e) {
|
||||
console.log(e.detail);
|
||||
let that = this;
|
||||
let list = this.data.list;
|
||||
let tabHeight = 0;
|
||||
if (this.data.load) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let view = wx.createSelectorQuery().select("#main-" + list[i].id);
|
||||
view.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
list[i].top = tabHeight;
|
||||
tabHeight = tabHeight + data.height;
|
||||
list[i].bottom = tabHeight;
|
||||
}).exec();
|
||||
}
|
||||
that.setData({
|
||||
load: false,
|
||||
list: list
|
||||
})
|
||||
}
|
||||
let scrollTop = e.detail.scrollTop + 20;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
|
||||
that.setData({
|
||||
VerticalNavTop: (list[i].id - 1) * 50,
|
||||
TabCur: list[i].id
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
<view class='cu-custom'>
|
||||
<view class="cu-bar fixed bg-shadeTop" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'></text> 返回
|
||||
</navigator>
|
||||
<view class='content' style='top:{{StatusBar}}px;'>Tab索引</view>
|
||||
@@ -13,70 +13,103 @@
|
||||
</swiper>
|
||||
<view class="VerticalBox">
|
||||
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh - 375rpx)">
|
||||
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{20}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
Tab{{index +1}}
|
||||
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{list}}" wx:key bindtap='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-id-{{TabCur}}" bindscroll="VerticalMain">
|
||||
<view class="padding-top padding-lr" wx:for="{{20}}" wx:key id="main-id-{{index}}">
|
||||
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)" scroll-into-view="main-{{MainCur}}" bindscroll="VerticalMain">
|
||||
<view class="padding-top padding-lr" wx:for="{{list}}" wx:key id="main-{{index}}">
|
||||
<view class='cu-bar solid-bottom bg-white'>
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text> Tab{{index +1}}</view>
|
||||
<text class='icon-title text-green'></text> Tab-{{item.name}} </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://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-infofill text-red'></text> 消息未送达</view>
|
||||
<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="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://image.weilanwl.com/img/square-2.jpg);">
|
||||
<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'>文晓港
|
||||
<view class="cu-tag round bg-orange sm">SVIP</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 class='text-gray text-sm'>
|
||||
<text class='icon-redpacket_fill text-red'></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 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://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view>喵星人互动群</view>
|
||||
<view class='text-gray text-sm'>
|
||||
喵星酱：喵喵喵！</view>
|
||||
<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="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://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view>喵星人互动群</view>
|
||||
<view class='text-gray text-sm'>
|
||||
喵星酱：喵喵喵！</view>
|
||||
<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="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>
|
||||
Reference in New Issue
Block a user