mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-10 00:54:00 +08:00
2019-2-25 22:42:38
This commit is contained in:
Weilanwl
40
demo/pages/plugin/drawer/drawer.js
Normal file
40
demo/pages/plugin/drawer/drawer.js
Normal file
@@ -0,0 +1,40 @@
|
||||
//index.js
|
||||
//获取应用实例
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
Custom: app.globalData.Custom,
|
||||
hasUserInfo: false,
|
||||
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
||||
TabCur: 1,
|
||||
scrollLeft: 0
|
||||
},
|
||||
getUserInfo: function (e) {
|
||||
console.log(e)
|
||||
app.globalData.userInfo = e.detail.userInfo
|
||||
this.setData({
|
||||
userInfo: e.detail.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
modalName: e.currentTarget.dataset.target
|
||||
})
|
||||
},
|
||||
hideModal(e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
tabSelect(e) {
|
||||
console.log(e);
|
||||
this.setData({
|
||||
TabCur: e.currentTarget.dataset.id,
|
||||
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
|
||||
})
|
||||
}
|
||||
})
|
||||
3
demo/pages/plugin/drawer/drawer.json
Normal file
3
demo/pages/plugin/drawer/drawer.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
93
demo/pages/plugin/drawer/drawer.wxml
Normal file
93
demo/pages/plugin/drawer/drawer.wxml
Normal file
@@ -0,0 +1,93 @@
|
||||
<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 -->
|
||||
<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>
|
||||
<!-- 样式2 -->
|
||||
<!-- <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> -->
|
||||
</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>
|
||||
101
demo/pages/plugin/drawer/drawer.wxss
Normal file
101
demo/pages/plugin/drawer/drawer.wxss
Normal file
@@ -0,0 +1,101 @@
|
||||
page {
|
||||
background-color: #555;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.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 60rpx 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;
|
||||
}
|
||||
|
||||
.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: 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));
|
||||
letter-spacing: 5px;
|
||||
font-size: 50rpx;
|
||||
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: 64rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
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: 10rpx;
|
||||
height: 10rpx;
|
||||
background-color: currentColor;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.DrawerPage .cu-bar.tabbar .action {
|
||||
flex: initial;
|
||||
}
|
||||
Reference in New Issue
Block a user