mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 19:44:03 +08:00
v2.1.2
This commit is contained in:
Weilanwl
@@ -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