2019-3-3 22:51:13

This commit is contained in:
Weilanwl
2019-03-03 22:51:19 +08:00
parent 6637f6fbef
commit 85246262a1
13 changed files with 172 additions and 37 deletions

View File

@@ -35,7 +35,8 @@
"pages/about/home/home",
"custom-tab-bar/index",
"pages/plugin/drawer/drawer",
"pages/plugin/verticalnav/verticalnav"
"pages/plugin/verticalnav/verticalnav",
"pages/about/test/custom"
],
"window": {
"navigationBarBackgroundColor": "#39b54a",

View File

@@ -1,6 +1,10 @@
@import "icon.wxss";
@import "colorui.wxss";
.cu-btn.button-hover {
pointer-events: none;
}
.cu-modal.show {
z-index: 99999;
}

View File

@@ -0,0 +1,19 @@
const app = getApp()
Page({
data: {
},
onLoad: function () {
wx.getSystemInfo({
success: e => {
let custom = wx.getMenuButtonBoundingClientRect();
this.setData({
StatusBar: e.statusBarHeight,
Custom: custom,
CustomBar: custom.bottom + custom.top - e.statusBarHeight
})
}
})
},
})

View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

View File

@@ -0,0 +1,6 @@
<view class="custom" style="height:{{CustomBar}}px;">
<view class="bar" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'></navigator>
</view>
</view>
<view class='StatusBar' style="height:{{StatusBar}}px;" ></view>

View File

@@ -0,0 +1,22 @@
.custom {
background-color: #333;
}
.bar{
display: flex;
align-items: center;
background: #555;
position: fixed;
top: 0;
width: 50%;
}
.StatusBar {
position: fixed;
background-color: #da0000;
width: 75%;
top: 0;
left: 0;
}
.border-custom{
background-color: #fff;
border-radius: 50px;
}

View File

@@ -9,7 +9,7 @@
<navigator url='filter' class='bg-grey padding radius'>
<text>filterblur引起的ios花屏测试</text>
</navigator>
<!-- <navigator url='filter' class='bg-grey padding radius margin-top'>
<text>filterblur引起的ios花屏测试</text>
</navigator> -->
<navigator url='custom' class='bg-grey padding radius margin-top'>
<text>胶囊按钮的Api测试</text>
</navigator>
</view>

View File

@@ -15,4 +15,7 @@ Page({
bordersize: e.detail.value
})
},
input(){
console.log();
}
});

View File

@@ -15,7 +15,7 @@
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn'>默认</button>
<button class='cu-btn' bindtap='input'>默认</button>
<button class='cu-btn round'>圆角</button>
<button class='cu-btn icon'>
<text class='icon-emojifill'></text>

View File

@@ -63,19 +63,6 @@ Component({
],
},
methods: {
onLoad() {
let that = this;
// 获取用户信息
wx.getSetting({
success: res => {
if (!res.authSetting['scope.userInfo']) {
wx.redirectTo({
url: '/pages/auth/auth'
})
}
}
})
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target

View File

@@ -1,5 +1,5 @@
.box {
margin: 20rpx;
margin: 30rpx 0;
}
.box view.cu-bar {

View File

@@ -37,13 +37,95 @@
</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>
<scroll-view scroll-y style='height:calc(100vh - {{CustomBar}}px)'>
<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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>
</scroll-view>
</view>
<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap='hideModal'>
<text class='icon-pullright'></text>

View File

@@ -11,7 +11,7 @@
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.5.2",
"libVersion": "2.6.1",
"appid": "wxfd5241d66a07713f",
"projectname": "ColorUI2.0-demo",
"debugOptions": {
@@ -36,7 +36,7 @@
"list": []
},
"miniprogram": {
"current": 32,
"current": 33,
"list": [
{
"id": 0,
@@ -201,13 +201,13 @@
"query": "",
"scene": null
},
{
"id": -1,
"name": "3.4 扩展-垂直导航",
"pathName": "pages/plugin/home/home",
"query": "",
"scene": null
},
{
"id": -1,
"name": "3.4 扩展-垂直导航",
"pathName": "pages/plugin/home/home",
"query": "",
"scene": null
},
{
"id": -1,
"name": "-----关于-首页-----",
@@ -233,10 +233,18 @@
"query": ""
},
{
"id": -1,
"id": 32,
"name": "4.3 --- filterblur引起的ios花屏测试",
"pathName": "pages/about/test/filter",
"query": ""
"query": "",
"scene": null
},
{
"id": -1,
"name": "4.3 --- 胶囊按钮的Api测试",
"pathName": "pages/about/test/custom",
"query": "",
"scene": null
}
]
}