mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-07 14:34:02 +08:00
2.1.1
This commit is contained in:
Weilanwl
145
Colorui-UniApp/pages/plugin/animation.vue
Normal file
145
Colorui-UniApp/pages/plugin/animation.vue
Normal 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
170
Colorui-UniApp/pages/plugin/drawer.vue
Normal 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
107
Colorui-UniApp/pages/plugin/home.vue
Normal 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
197
Colorui-UniApp/pages/plugin/indexes.vue
Normal 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
223
Colorui-UniApp/pages/plugin/verticalnav.vue
Normal 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>
|
||||
Reference in New Issue
Block a user