Skip to content

Commit d59a310

Browse files
wen-gangwen-gang
committed
v2.0.7
v2.0.7
1 parent e2e35a2 commit d59a310

File tree

14 files changed

+268
-178
lines changed

14 files changed

+268
-178
lines changed

‎demo/app.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
"pages/about/test/filter",
3535
"pages/about/home/home",
3636
"custom-tab-bar/index",
37-
"pages/plugin/drawer/drawer"
37+
"pages/plugin/drawer/drawer",
38+
"pages/plugin/verticalnav/verticalnav"
3839
],
3940
"window": {
4041
"navigationBarBackgroundColor": "#39b54a",

‎demo/pages/about/log/log.wxml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
<view class="bg-gradual-green content shadow-blur">
1111
<view class="cu-capsule radius">
1212
<view class="cu-tag bg-white text-green">v2.0.7</view>
13-
<view class="cu-tag line-white">2019/02/20</view>
13+
<view class="cu-tag line-white">2019/02/25</view>
1414
</view>
1515
<view class='margin-top-sm text-content'>
1616
<view>1.新增操作条胶囊样式，优化全屏操作条</view>
17-
<view>2.新增操垂直导航</view>
17+
<view>2.优化iPhone X的Tabbar样式</view>
18+
<view>3.新增全屏抽屉插件</view>
19+
<view>4.新增垂直导航插件</view>
1820
</view>
1921
</view>
2022
</view>

‎demo/pages/component/nav/nav.wxml‎

Lines changed: 0 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -68,78 +68,3 @@
6868
<text class='icon-clothesfill'></text> 皮肤
6969
</view>
7070
</scroll-view>
71-
72-
<view class="cu-bar bg-white margin-top solid-bottom">
73-
<view class='action'>
74-
<text class='icon-title text-orange'></text> 垂直导航
75-
</view>
76-
</view>
77-
<view class="ScrollBox">
78-
<scroll-view class="ScrollNav nav" scroll-y scroll-with-animation scroll-top="{{scrollNavTop}}" style="height:calc(100vh - 375rpx)">
79-
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{20}}" wx:key bindtap='tabSelect' data-id="{{index}}">
80-
Tab{{index +1}}
81-
</view>
82-
</scroll-view>
83-
<scroll-view class="ScrollMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)" scroll-into-view="main-id-{{TabCur}}" bindscroll="ScrollMain">
84-
<view class="padding-top padding-lr" wx:for="{{20}}" wx:key id="main-id-{{index}}">
85-
<view class='cu-bar solid-bottom bg-white'>
86-
<view class='action'>
87-
<text class='icon-title text-green'></text> Tab{{index +1}}</view>
88-
</view>
89-
<view class="cu-list menu menu-avatar">
90-
<view class="cu-item">
91-
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
92-
<view class='content'>
93-
<view class='text-grey'>文晓港</view>
94-
<view class='text-gray text-sm'>
95-
<text class='icon-infofill text-red'></text> 消息未送达</view>
96-
</view>
97-
<view class='action'>
98-
<view class='text-grey text-xs'>22:20</view>
99-
<view class="cu-tag round bg-grey sm">5</view>
100-
</view>
101-
</view>
102-
<view class="cu-item">
103-
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
104-
<view class="cu-tag badge">99+</view>
105-
</view>
106-
<view class='content'>
107-
<view class='text-grey'>文晓港
108-
<view class="cu-tag round bg-orange sm">SVIP</view>
109-
</view>
110-
<view class='text-gray text-sm'>
111-
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
112-
</view>
113-
<view class='action'>
114-
<view class='text-grey text-xs'>22:20</view>
115-
<view class='icon-notice_forbid_fill text-gray'></view>
116-
</view>
117-
</view>
118-
<view class="cu-item ">
119-
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
120-
<view class='content'>
121-
<view>喵星人互动群</view>
122-
<view class='text-gray text-sm'>
123-
喵星酱：喵喵喵！</view>
124-
</view>
125-
<view class='action'>
126-
<view class='text-grey text-xs'>22:20</view>
127-
<view class="cu-tag round bg-red sm">5</view>
128-
</view>
129-
</view>
130-
<view class="cu-item grayscale">
131-
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
132-
<view class='content'>
133-
<view>喵星人互动群</view>
134-
<view class='text-gray text-sm'>
135-
喵星酱：喵喵喵！</view>
136-
</view>
137-
<view class='action'>
138-
<view class='text-grey text-xs'>22:20</view>
139-
<view class="cu-tag round bg-red sm">5</view>
140-
</view>
141-
</view>
142-
</view>
143-
</view>
144-
</scroll-view>
145-
</view>

‎demo/pages/component/nav/nav.wxss‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +0,0 @@
1-
/* pages/component/nav/nav.wxss */
2-
.ScrollNav.nav {
3-
width: 200rpx;
4-
white-space: initial;
5-
}
6-
7-
.ScrollNav.nav .cu-item {
8-
width: 100%;
9-
text-align: center;
10-
background-color: #fff;
11-
margin: 0;
12-
border: none;
13-
height: 50px;
14-
position: relative;
15-
}
16-
17-
.ScrollNav.nav .cu-item.cur {
18-
background-color: #f1f1f1;
19-
}
20-
.ScrollNav.nav .cu-item.cur::after {
21-
content: "";
22-
width: 8rpx;
23-
height: 30rpx;
24-
border-radius: 10rpx 0 0 10rpx;
25-
position: absolute;
26-
background-color: currentColor;
27-
top: 0;
28-
right: 0rpx;
29-
bottom: 0;
30-
margin: auto;
31-
}
32-
.ScrollBox{
33-
display: flex;
34-
}
35-
.ScrollMain{
36-
background-color: #f1f1f1;
37-
}

‎demo/pages/plugin/drawer/drawer.wxml‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,33 @@
88
</block>
99
</view>
1010
<!-- 样式1 -->
11-
<view class="action {{1==TabCur?'cur':''}}" bindtap='tabSelect' data-id="1">
12-
<view class='icon-cu-image'>
13-
<image src='/images/tabbar/component{{1==TabCur?"_cur":""}}.png'></image>
11+
<block wx:if="{{1==TabCur?'cur':''}}">
12+
<view class="action {{1==TabCur?'cur':''}}" bindtap='tabSelect' data-id="1">
13+
<view class='icon-cu-image'>
14+
<image src='/images/tabbar/component{{1==TabCur?"_cur":""}}.png'></image>
15+
</view>
1416
</view>
15-
</view>
16-
<view class="action {{2==TabCur?'cur':''}}" bindtap='tabSelect' data-id="2">
17-
<view class='icon-cu-image'>
18-
<image src='/images/tabbar/plugin{{2==TabCur?"_cur":""}}.png'></image>
19-
<view class='cu-tag badge'>99</view>
17+
<view class="action {{2==TabCur?'cur':''}}" bindtap='tabSelect' data-id="2">
18+
<view class='icon-cu-image'>
19+
<image src='/images/tabbar/plugin{{2==TabCur?"_cur":""}}.png'></image>
20+
<view class='cu-tag badge'>99</view>
21+
</view>
2022
</view>
21-
</view>
22-
<view class="action {{3==TabCur?'cur':''}}" bindtap='tabSelect' data-id="3">
23-
<view class='icon-cu-image'>
24-
<image src='/images/tabbar/about{{3==TabCur?"_cur":""}}.png'></image>
25-
<view class='cu-tag badge'></view>
23+
<view class="action {{3==TabCur?'cur':''}}" bindtap='tabSelect' data-id="3">
24+
<view class='icon-cu-image'>
25+
<image src='/images/tabbar/about{{3==TabCur?"_cur":""}}.png'></image>
26+
<view class='cu-tag badge'></view>
27+
</view>
2628
</view>
27-
</view>
29+
</block>
2830
<!-- 样式2 -->
29-
<!-- <scroll-view scroll-x class="nav" scroll-with-animation scroll-left="{{scrollLeft}}" style='width:calc(100% - 440rpx)'>
30-
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
31-
Tab{{index}}
32-
</view>
33-
</scroll-view> -->
31+
<block wx:if="{{1!=TabCur?'cur':''}}">
32+
<scroll-view scroll-x class="nav" scroll-with-animation scroll-left="{{scrollLeft}}" style='width:calc(100% - 440rpx)'>
33+
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
34+
Tab{{index}}
35+
</view>
36+
</scroll-view>
37+
</block>
3438
</view>
3539
</view>
3640
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='padding margin text-center'>
@@ -41,7 +45,9 @@
4145
</navigator>
4246
</view>
4347
</view>
44-
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap='hideModal'><text class='icon-pullright'></text></view>
48+
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap='hideModal'>
49+
<text class='icon-pullright'></text>
50+
</view>
4551
<view class="DrawerWindow {{modalName=='viewModal'?'show':''}}">
4652
<view class='padding-xl text-center text-white'>
4753
<image src='/images/logo.png' class='response' mode='widthFix' style='width:200rpx;margin-top:100rpx'></image>

‎demo/pages/plugin/home/home.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ Component({
1717
title: '全屏抽屉',
1818
img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
1919
url: '../drawer/drawer'
20+
},
21+
{
22+
title: '垂直导航',
23+
img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
24+
url: '../verticalnav/verticalnav'
2025
}
2126
]
2227
},

‎demo/pages/plugin/verticalnav/verticalnav.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const app = getApp()
2+
Page({
3+
data: {
4+
StatusBar: app.globalData.StatusBar,
5+
CustomBar: app.globalData.CustomBar,
6+
Custom: app.globalData.Custom,
7+
TabCur: 0,
8+
VerticalNavTop: 0
9+
},
10+
tabSelect(e) {
11+
this.setData({
12+
TabCur: e.currentTarget.dataset.id,
13+
VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
14+
})
15+
},
16+
VerticalMain(e) {
17+
console.log(e.detail);
18+
}
19+
})

‎demo/pages/plugin/verticalnav/verticalnav.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎demo/pages/plugin/verticalnav/verticalnav.wxml‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<view class='cu-custom'>
2+
<view class="cu-bar fixed bg-shadeTop" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
3+
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
4+
<text class='icon-back'></text> 返回
5+
</navigator>
6+
<view class='content' style='top:{{StatusBar}}px;'>Tab索引</view>
7+
</view>
8+
</view>
9+
<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
10+
<swiper-item wx:for="{{4}}" wx:key>
11+
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
12+
</swiper-item>
13+
</swiper>
14+
<view class="VerticalBox">
15+
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh - 375rpx)">
16+
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{20}}" wx:key bindtap='tabSelect' data-id="{{index}}">
17+
Tab{{index +1}}
18+
</view>
19+
</scroll-view>
20+
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)" scroll-into-view="main-id-{{TabCur}}" bindscroll="VerticalMain">
21+
<view class="padding-top padding-lr" wx:for="{{20}}" wx:key id="main-id-{{index}}">
22+
<view class='cu-bar solid-bottom bg-white'>
23+
<view class='action'>
24+
<text class='icon-title text-green'></text> Tab{{index +1}}</view>
25+
</view>
26+
<view class="cu-list menu menu-avatar">
27+
<view class="cu-item">
28+
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
29+
<view class='content'>
30+
<view class='text-grey'>文晓港</view>
31+
<view class='text-gray text-sm'>
32+
<text class='icon-infofill text-red'></text> 消息未送达</view>
33+
</view>
34+
<view class='action'>
35+
<view class='text-grey text-xs'>22:20</view>
36+
<view class="cu-tag round bg-grey sm">5</view>
37+
</view>
38+
</view>
39+
<view class="cu-item">
40+
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
41+
<view class="cu-tag badge">99+</view>
42+
</view>
43+
<view class='content'>
44+
<view class='text-grey'>文晓港
45+
<view class="cu-tag round bg-orange sm">SVIP</view>
46+
</view>
47+
<view class='text-gray text-sm'>
48+
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
49+
</view>
50+
<view class='action'>
51+
<view class='text-grey text-xs'>22:20</view>
52+
<view class='icon-notice_forbid_fill text-gray'></view>
53+
</view>
54+
</view>
55+
<view class="cu-item ">
56+
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
57+
<view class='content'>
58+
<view>喵星人互动群</view>
59+
<view class='text-gray text-sm'>
60+
喵星酱：喵喵喵！</view>
61+
</view>
62+
<view class='action'>
63+
<view class='text-grey text-xs'>22:20</view>
64+
<view class="cu-tag round bg-red sm">5</view>
65+
</view>
66+
</view>
67+
<view class="cu-item grayscale">
68+
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
69+
<view class='content'>
70+
<view>喵星人互动群</view>
71+
<view class='text-gray text-sm'>
72+
喵星酱：喵喵喵！</view>
73+
</view>
74+
<view class='action'>
75+
<view class='text-grey text-xs'>22:20</view>
76+
<view class="cu-tag round bg-red sm">5</view>
77+
</view>
78+
</view>
79+
</view>
80+
</view>
81+
</scroll-view>
82+
</view>

‎demo/pages/plugin/verticalnav/verticalnav.wxss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* pages/component/nav/nav.wxss */
2+
.VerticalNav.nav {
3+
width: 200rpx;
4+
white-space: initial;
5+
}
6+
7+
.VerticalNav.nav .cu-item {
8+
width: 100%;
9+
text-align: center;
10+
background-color: #fff;
11+
margin: 0;
12+
border: none;
13+
height: 50px;
14+
position: relative;
15+
}
16+
17+
.VerticalNav.nav .cu-item.cur {
18+
background-color: #f1f1f1;
19+
}
20+
.VerticalNav.nav .cu-item.cur::after {
21+
content: "";
22+
width: 8rpx;
23+
height: 30rpx;
24+
border-radius: 10rpx 0 0 10rpx;
25+
position: absolute;
26+
background-color: currentColor;
27+
top: 0;
28+
right: 0rpx;
29+
bottom: 0;
30+
margin: auto;
31+
}
32+
.VerticalBox{
33+
display: flex;
34+
}
35+
.VerticalMain{
36+
background-color: #f1f1f1;
37+
}

0 commit comments

Comments
 (0)