blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-05-29 09:49:16 +08:00
Code Issues Projects Releases Wiki Activity

refactor: compatible with iphone by env

Browse Source
This commit is contained in:
rex 2019-09-25 10:50:11 +08:00 committed by GitHub
parent 26f2b77538
commit 147080bf54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 87 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
example/app.json
View File

@ -1,18 +1,4 @@
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [
{
"pagePath": "pages/tabbar/index"
},
{
"pagePath": "pages/tabbar1/index"
}
]
},
"pages": [
"pages/dashboard/index",
"pages/action-sheet/index",
@ -39,7 +25,6 @@
"pages/sidebar/index",
"pages/tab/index",
"pages/tabbar/index",
"pages/tabbar1/index",
"pages/tag/index",
"pages/toast/index",
"pages/transition/index",

33
example/custom-tab-bar/index.js
View File

@ -1,33 +0,0 @@
Component({
data: {
active: 0,
list: [
{
icon: 'home-o',
text: 'tabbar示例1',
url: '/pages/tabbar/index'
},
{
icon: 'search',
text: 'tabbar示例2',
url: '/pages/tabbar1/index'
}
]
},
methods: {
onChange(event) {
this.setData({ active: event.detail });
wx.switchTab({
url: this.data.list[event.detail].url
});
},
init() {
const page = getCurrentPages().pop();
this.setData({
active: this.data.list.findIndex(item => item.url === `/${page.route}`)
});
}
}
});

7
example/custom-tab-bar/index.json
View File

@ -1,7 +0,0 @@
{
"component": true,
"usingComponents": {
"van-tabbar": "../dist/tabbar/index",
"van-tabbar-item": "../dist/tabbar-item/index"
}
}

5
example/custom-tab-bar/index.wxml
View File

@ -1,5 +0,0 @@
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{ list }}" wx:key="text" icon="{{ item.icon }}">
{{ item.text }}
</van-tabbar-item>
</van-tabbar>

4
example/pages/tabbar/index.js
View File

@ -7,10 +7,6 @@ Page({
active3: 0
},
onShow() {
this.getTabBar().init();
},
onChange(event) {
const { key } = event.currentTarget.dataset;
this.setData({ [key]: event.detail });

23
example/pages/tabbar1/index.js
View File

@ -1,23 +0,0 @@
import Page from '../../common/page';
Page({
data: {
active: 0,
active2: 0,
icon: {
normal:
'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
active:
'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
}
},
onShow() {
this.getTabBar().init();
},
onChange(event) {
const { key } = event.currentTarget.dataset;
this.setData({ [key]: event.detail });
}
});

3
example/pages/tabbar1/index.json
View File

@ -1,3 +0,0 @@
{
"navigationBarTitleText": "Tabbar 标签栏"
}

43
example/pages/tabbar1/index.wxml
View File

@ -1,43 +0,0 @@
<demo-block title="自定义图标">
<van-tabbar
active="{{ active2 }}"
data-key="active2"
custom-class="tabbar"
safe-area-inset-bottom="{{ false }}"
bind:change="onChange"
>
<van-tabbar-item info="3">
<image
slot="icon"
src="{{ icon.normal }}"
mode="aspectFit"
/>
<image
slot="icon-active"
src="{{ icon.active }}"
mode="aspectFit"
/>
自定义
</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block title="自定义颜色">
<van-tabbar
active="{{ active }}"
data-key="active"
custom-class="tabbar"
safe-area-inset-bottom="{{ false }}"
active-color="#07c160"
inactive-color="#000"
bind:change="onChange"
>
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</demo-block>

3
example/pages/tabbar1/index.wxss
View File

@ -1,3 +0,0 @@
.tabbar {
position: relative !important;
}

7
packages/action-sheet/index.ts
View File

@ -1,10 +1,7 @@
import { VantComponent } from '../common/component';
import { safeArea } from '../mixins/safe-area';
import { Weapp } from 'definitions/weapp';
VantComponent({
mixins: [safeArea()],
props: {
show: Boolean,
title: String,
@ -32,6 +29,10 @@ VantComponent({
closeOnClickAction: {
type: Boolean,
value: true
},
safeAreaInsetBottom: {
type: Boolean,
value: true
}
},

3
packages/common/style/var.less
View File

@ -193,9 +193,6 @@
@toast-default-width: 90px;
@toast-default-min-height: 90px;
// iPhoneX
@safe-area-inset-bottom: 34px;
// GridItem
@grid-item-content-padding: @padding-md @padding-xs;
@grid-item-content-background-color: @white;

3
packages/goods-action/index.less
View File

@ -10,6 +10,7 @@
.theme(background-color, '@white');
&--safe {
.theme(padding-bottom, '@safe-area-inset-bottom');
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

8
packages/goods-action/index.ts
View File

@ -1,6 +1,10 @@
import { VantComponent } from '../common/component';
import { safeArea } from '../mixins/safe-area';
VantComponent({
mixins: [safeArea()]
props: {
safeAreaInsetBottom: {
type: Boolean,
value: true
}
}
});

2
packages/goods-action/index.wxml
View File

@ -1,5 +1,5 @@
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class {{ utils.bem('goods-action', { safe: isIPhoneX && safeAreaInsetBottom }) }}">
<view class="custom-class {{ utils.bem('goods-action', { safe: safeAreaInsetBottom }) }}">
<slot />
</view>

47
packages/mixins/safe-area.ts
View File

@ -1,47 +0,0 @@
let cache = null;
function getSafeArea() {
return new Promise((resolve, reject) => {
if (cache != null) {
resolve(cache);
} else {
wx.getSystemInfo({
success: ({ model, screenHeight, statusBarHeight }) => {
const iphoneX = /iphone x/i.test(model);
const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
cache = {
isIPhoneX: iphoneX || iphoneNew,
statusBarHeight
};
resolve(cache);
},
fail: reject
});
}
});
}
export const safeArea = ({
safeAreaInsetBottom = true,
safeAreaInsetTop = false
} = {}) =>
Behavior({
properties: {
safeAreaInsetTop: {
type: Boolean,
value: safeAreaInsetTop
},
safeAreaInsetBottom: {
type: Boolean,
value: safeAreaInsetBottom
}
},
created() {
getSafeArea().then(({ isIPhoneX, statusBarHeight }) => {
this.setData({ isIPhoneX, statusBarHeight });
});
}
});

5
packages/nav-bar/index.less
View File

@ -9,6 +9,11 @@
.theme(line-height, '@nav-bar-height');
.theme(background-color, '@white');
&--safe {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
&__text {
display: inline-block;
margin: 0 -15px;

9
packages/nav-bar/index.ts
View File

@ -1,9 +1,6 @@
import { VantComponent } from '../common/component';
import { safeArea } from '../mixins/safe-area';
VantComponent({
mixins: [safeArea({ safeAreaInsetTop: true })],
classes: ['title-class'],
props: {
@ -19,7 +16,11 @@ VantComponent({
zIndex: {
type: Number,
value: 1
}
},
safeAreaInsetTop: {
type: Boolean,
value: true
},
},
methods: {

4
packages/nav-bar/index.wxml
View File

@ -1,8 +1,8 @@
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
style="z-index: {{ zIndex }}; {{ safeAreaInsetTop ? 'padding-top: ' + statusBarHeight + 'px;' : '' }}"
class="{{ utils.bem('nav-bar', { fixed, safe: safeAreaInsetTop }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
style="z-index: {{ zIndex }};"
>
<view class="van-nav-bar__left" bind:tap="onClickLeft">
<block wx:if="{{ leftArrow || leftText }}">

24
packages/notify/index.less
View File

@ -2,29 +2,37 @@
@import '../common/style/theme.less';
.van-notify {
position: fixed;
top: 0;
box-sizing: border-box;
width: 100%;
text-align: center;
word-wrap: break-word;
.theme(padding, '@notify-padding');
.theme(font-size, '@notify-font-size');
.theme(line-height, '@notify-line-height');
&__container {
position: fixed;
top: 0;
box-sizing: border-box;
width: 100%;
}
&__safe-area {
height: constant(safe-area-inset-top);
height: env(safe-area-inset-top);
}
&--primary {
.theme(background-color, "@notify-primary-background-color");
.theme(background-color, '@notify-primary-background-color');
}
&--success {
.theme(background-color, "@notify-success-background-color");
.theme(background-color, '@notify-success-background-color');
}
&--danger {
.theme(background-color, "@notify-danger-background-color");
.theme(background-color, '@notify-danger-background-color');
}
&--warning {
.theme(background-color, "@notify-warning-background-color");
.theme(background-color, '@notify-warning-background-color');
}
}

7
packages/notify/index.ts
View File

@ -2,11 +2,8 @@
import { Weapp } from 'definitions/weapp';
import { VantComponent } from '../common/component';
import { WHITE } from '../common/color';
import { safeArea } from '../mixins/safe-area';
VantComponent({
mixins: [safeArea()],
props: {
message: String,
background: String,
@ -25,6 +22,10 @@ VantComponent({
zIndex: {
type: Number,
value: 110
},
safeAreaInsetTop: {
type: Boolean,
value: false
}
},

13
packages/notify/index.wxml
View File

@ -1,10 +1,15 @@
<van-transition
name="slide-down"
show="{{ show }}"
custom-class="van-notify van-notify--{{ type }}"
custom-style="background:{{ background }}; color: {{ color }}; z-index: {{ zIndex }};"
custom-class="van-notify__container"
custom-style="z-index: {{ zIndex }};"
bind:tap="onTap"
>
<view wx:if="{{ safeAreaInsetTop }}" style="padding-top: {{ statusBarHeight }}px"></view>
<text>{{ message }}</text>
<view
class="van-notify van-notify--{{ type }}"
style="background:{{ background }};color:{{ color }};"
>
<view wx:if="{{ safeAreaInsetTop }}" class="van-notify__safe-area"></view>
<text>{{ message }}</text>
</view>
</van-transition>

8
packages/popup/index.less
View File

@ -84,7 +84,13 @@
}
&--bottom&--safe {
.theme(padding-bottom, '@safe-area-inset-bottom');
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
&--safeTop {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
&__close-icon {

11
packages/popup/index.ts
View File

@ -1,6 +1,5 @@
import { VantComponent } from '../common/component';
import { transition } from '../mixins/transition';
import { safeArea } from '../mixins/safe-area';
VantComponent({
classes: [
@ -12,7 +11,7 @@ VantComponent({
'leave-to-class'
],
mixins: [transition(false), safeArea()],
mixins: [transition(false)],
props: {
round: Boolean,
@ -47,6 +46,14 @@ VantComponent({
type: String,
value: 'center',
observer: 'observeClass'
},
safeAreaInsetBottom: {
type: Boolean,
value: true
},
safeAreaInsetTop: {
type: Boolean,
value: false
}
},

4
packages/popup/index.wxml
View File

@ -10,8 +10,8 @@
/>
<view
wx:if="{{ inited }}"
class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: isIPhoneX && safeAreaInsetBottom }]) }}"
style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ safeAreaInsetTop ? 'padding-top: ' + statusBarHeight + 'px;' : '' }} {{ customStyle }}"
class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]) }}"
style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }};{{ customStyle }}"
bind:transitionend="onTransitionEnd"
>
<slot />

3
packages/submit-bar/index.less
View File

@ -42,7 +42,8 @@
.theme(background-color, '@submit-bar-background-color');
&--safe {
.theme(padding-bottom, '@safe-area-inset-bottom');
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

9
packages/submit-bar/index.ts
View File

@ -1,10 +1,7 @@
import { VantComponent } from '../common/component';
import { safeArea } from '../mixins/safe-area';
import { Weapp } from 'definitions/weapp';
VantComponent({
mixins: [safeArea()],
classes: [
'bar-class',
'price-class',
@ -39,7 +36,11 @@ VantComponent({
value: 2,
observer: 'updatePrice'
},
suffixLabel: String
suffixLabel: String,
safeAreaInsetBottom: {
type: Boolean,
value: true
}
},
methods: {

2
packages/submit-bar/index.wxml
View File

@ -16,7 +16,7 @@
<slot name="tip" />
</view>
<view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
<view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom }) }}">
<slot />
<view wx:if="{{ hasPrice }}" class="van-submit-bar__text">
<text>{{ label || '合计：' }}</text>

3
packages/tabbar/index.less
View File

@ -14,6 +14,7 @@
}
&--safe {
.theme(padding-bottom, '@safe-area-inset-bottom');
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

7
packages/tabbar/index.ts
View File

@ -1,9 +1,6 @@
import { VantComponent } from '../common/component';
import { safeArea } from '../mixins/safe-area';
VantComponent({
mixins: [safeArea()],
relation: {
name: 'tabbar-item',
type: 'descendant',
@ -44,6 +41,10 @@ VantComponent({
zIndex: {
type: Number,
value: 1
},
safeAreaInsetBottom: {
type: Boolean,
value: true
}
},

2
packages/tabbar/index.wxml
View File

@ -1,7 +1,7 @@
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="custom-class {{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: isIPhoneX && safeAreaInsetBottom }) }}"
class="custom-class {{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }) }}"
style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
>
<slot />