@tuya-miniapp/smart-ui 2.7.0-beta-5 → 2.7.0-beta-7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nav-bar/index.css +1 -1
- package/dist/nav-bar/index.wxml +2 -2
- package/dist/nav-bar/index.wxss +1 -1
- package/dist/picker-column/index.wxs +21 -18
- package/lib/nav-bar/index.css +1 -1
- package/lib/nav-bar/index.wxml +2 -2
- package/lib/nav-bar/index.wxss +1 -1
- package/lib/picker-column/index.wxs +21 -18
- package/package.json +1 -1
package/dist/nav-bar/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;
|
|
1
|
+
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,20px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,20px)}
|
package/dist/nav-bar/index.wxml
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop, background }) }}; {{ customStyle }}"
|
|
9
9
|
>
|
|
10
10
|
<view class="smart-nav-bar__content">
|
|
11
|
-
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
|
|
11
|
+
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', text: !!leftText, icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
|
|
12
12
|
<smart-icon
|
|
13
13
|
wx:if="{{ leftArrow }}"
|
|
14
14
|
size="24px"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<block>{{ title }}</block>
|
|
44
44
|
<slot name="title" />
|
|
45
45
|
</view>
|
|
46
|
-
<view class="
|
|
46
|
+
<view class="{{utils.bem('nav-bar__right', { text: !!rightText })}}" bind:tap="onClickRight">
|
|
47
47
|
<view
|
|
48
48
|
wx:if="{{ rightIcon }}"
|
|
49
49
|
data-type="rightIcon"
|
package/dist/nav-bar/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;
|
|
1
|
+
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,20px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,20px)}
|
|
@@ -29,7 +29,9 @@ var preStateObj = {}
|
|
|
29
29
|
|
|
30
30
|
function updateState(instanceId, key, value) {
|
|
31
31
|
if (!key) return;
|
|
32
|
-
|
|
32
|
+
if (!state[instanceId]) {
|
|
33
|
+
state[instanceId] = {}
|
|
34
|
+
}
|
|
33
35
|
state[instanceId][key] = value
|
|
34
36
|
}
|
|
35
37
|
|
|
@@ -288,12 +290,12 @@ function touchMove(instanceId) {
|
|
|
288
290
|
var direction =
|
|
289
291
|
offsetCompare < 0 ? 'down' : offsetCompare > 0 ? 'up' : state.movingDirection;
|
|
290
292
|
updateVisibleOptions(animationIndex, instanceId);
|
|
291
|
-
var
|
|
293
|
+
var isOverOptionsItem = state.loop ? false : animationIndex < 0 || animationIndex > state.options.length - 1;
|
|
292
294
|
var activeIndex = Math.round(animationIndex);
|
|
293
295
|
var isDisabled = wxUtils.isObj(state.options[activeIndex]) && state.options[activeIndex].disabled;
|
|
294
296
|
if (
|
|
295
297
|
intPreIndex !== intCurIndex
|
|
296
|
-
&& !
|
|
298
|
+
&& !isOverOptionsItem
|
|
297
299
|
&& !isDisabled
|
|
298
300
|
) {
|
|
299
301
|
ownerInstance.callMethod('animationIndexChange', animationIndex);
|
|
@@ -379,10 +381,10 @@ function touchEnd(instanceId) {
|
|
|
379
381
|
currTargetActiveIndex = adjustIndex(Math.round(currTargetActiveIndex), state.options, state.loop);
|
|
380
382
|
targetOffset = -currTargetActiveIndex * state.itemHeight;
|
|
381
383
|
var animationOffset = Math.abs(targetOffset - state.preOffsetting);
|
|
382
|
-
var
|
|
384
|
+
var isOverOptionsLimit = state.loop ? false : state.animationIndex < 0 || state.animationIndex > state.options.length - 1;
|
|
383
385
|
var totalDistance = targetOffset - state.preOffsetting;
|
|
384
386
|
// 如果动画时间大于150ms,并且滚动距离大于itemHeight,则需要进行动态更新列表
|
|
385
|
-
if (state.animationTime > 200 && animationOffset > state.itemHeight && !
|
|
387
|
+
if (state.animationTime > 200 && animationOffset > state.itemHeight && !isOverOptionsLimit) {
|
|
386
388
|
var countOffsetIndex = Math.abs(Math.round(currTargetActiveIndex - state.animationIndex));
|
|
387
389
|
var maxVibrateShort = Math.floor(state.animationTime / 30);
|
|
388
390
|
|
|
@@ -446,6 +448,13 @@ function touchEnd(instanceId) {
|
|
|
446
448
|
}
|
|
447
449
|
}
|
|
448
450
|
|
|
451
|
+
|
|
452
|
+
function updateVisibleOptions(currentIndex, instanceId) {
|
|
453
|
+
var newArr = getVisibleOptions(currentIndex, instanceId);
|
|
454
|
+
updateState(instanceId, 'optionsVIndexList', newArr);
|
|
455
|
+
return newArr
|
|
456
|
+
}
|
|
457
|
+
|
|
449
458
|
var Cache = {}
|
|
450
459
|
|
|
451
460
|
function getVisibleOptions(currentIndex, instanceId) {
|
|
@@ -528,12 +537,6 @@ function getVisibleOptions(currentIndex, instanceId) {
|
|
|
528
537
|
return newArr
|
|
529
538
|
}
|
|
530
539
|
|
|
531
|
-
function updateVisibleOptions(currentIndex, instanceId) {
|
|
532
|
-
var newArr = getVisibleOptions(currentIndex, instanceId);
|
|
533
|
-
updateState(instanceId, 'optionsVIndexList', newArr);
|
|
534
|
-
return newArr
|
|
535
|
-
}
|
|
536
|
-
|
|
537
540
|
function getWrapperCSSVar(instanceId) {
|
|
538
541
|
var state = getCurrState(instanceId);
|
|
539
542
|
var optionsVIndexList = state.optionsVIndexList;
|
|
@@ -541,7 +544,7 @@ function getWrapperCSSVar(instanceId) {
|
|
|
541
544
|
if (currentValue === '' || currentValue === undefined) {
|
|
542
545
|
previousValue['--picker-item-content_' + currentIndex] = '""';
|
|
543
546
|
} else {
|
|
544
|
-
var index =
|
|
547
|
+
var index = currentValue;
|
|
545
548
|
var text = optionText(state.options, index, state.valueKey);
|
|
546
549
|
previousValue['--picker-item-content_' + currentIndex] = '"' + (text === undefined ? '' : text) + '"';
|
|
547
550
|
}
|
|
@@ -583,17 +586,17 @@ function tapItem(instanceId) {
|
|
|
583
586
|
clearTimeout(state.tapTimer);
|
|
584
587
|
updateState(instanceId, 'tapTimer', null);
|
|
585
588
|
}
|
|
586
|
-
var
|
|
587
|
-
var offsetCount = Math.abs(
|
|
588
|
-
updateVisibleOptions(
|
|
589
|
-
updateState(instanceId, 'animationIndex',
|
|
589
|
+
var targetAnimationIndex = getNewAnimationIndex(state.animationIndex, currOptionsActiveIndex, state.options.length || 1, state.loop);
|
|
590
|
+
var offsetCount = Math.abs(targetAnimationIndex - state.animationIndex);
|
|
591
|
+
updateVisibleOptions(targetAnimationIndex, instanceId);
|
|
592
|
+
updateState(instanceId, 'animationIndex', targetAnimationIndex);
|
|
590
593
|
updateWrapperStyle(instanceId, ownerInstance, {
|
|
591
594
|
transition: 'transform ' + 300 + 'ms cubic-bezier(0.2, 0.9, 0.25, 1)'
|
|
592
595
|
});
|
|
593
|
-
ownerInstance.callMethod('animationIndexChange',
|
|
596
|
+
ownerInstance.callMethod('animationIndexChange', targetAnimationIndex);
|
|
594
597
|
ownerInstance.callMethod('vibrateShort', offsetCount, 200);
|
|
595
598
|
var tapTimer = setTimeout(function() {
|
|
596
|
-
ownerInstance.callMethod('activeIndexChange',
|
|
599
|
+
ownerInstance.callMethod('activeIndexChange', targetAnimationIndex);
|
|
597
600
|
updateState(instanceId, 'tapTimer', null);
|
|
598
601
|
setTimeout(function() {
|
|
599
602
|
ownerInstance.callMethod('animationEnd');
|
package/lib/nav-bar/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;
|
|
1
|
+
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,20px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,20px)}
|
package/lib/nav-bar/index.wxml
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop, background }) }}; {{ customStyle }}"
|
|
9
9
|
>
|
|
10
10
|
<view class="smart-nav-bar__content">
|
|
11
|
-
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
|
|
11
|
+
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', text: !!leftText, icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
|
|
12
12
|
<smart-icon
|
|
13
13
|
wx:if="{{ leftArrow }}"
|
|
14
14
|
size="24px"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<block>{{ title }}</block>
|
|
44
44
|
<slot name="title" />
|
|
45
45
|
</view>
|
|
46
|
-
<view class="
|
|
46
|
+
<view class="{{utils.bem('nav-bar__right', { text: !!rightText })}}" bind:tap="onClickRight">
|
|
47
47
|
<view
|
|
48
48
|
wx:if="{{ rightIcon }}"
|
|
49
49
|
data-type="rightIcon"
|
package/lib/nav-bar/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;
|
|
1
|
+
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,20px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,20px)}
|
|
@@ -29,7 +29,9 @@ var preStateObj = {}
|
|
|
29
29
|
|
|
30
30
|
function updateState(instanceId, key, value) {
|
|
31
31
|
if (!key) return;
|
|
32
|
-
|
|
32
|
+
if (!state[instanceId]) {
|
|
33
|
+
state[instanceId] = {}
|
|
34
|
+
}
|
|
33
35
|
state[instanceId][key] = value
|
|
34
36
|
}
|
|
35
37
|
|
|
@@ -288,12 +290,12 @@ function touchMove(instanceId) {
|
|
|
288
290
|
var direction =
|
|
289
291
|
offsetCompare < 0 ? 'down' : offsetCompare > 0 ? 'up' : state.movingDirection;
|
|
290
292
|
updateVisibleOptions(animationIndex, instanceId);
|
|
291
|
-
var
|
|
293
|
+
var isOverOptionsItem = state.loop ? false : animationIndex < 0 || animationIndex > state.options.length - 1;
|
|
292
294
|
var activeIndex = Math.round(animationIndex);
|
|
293
295
|
var isDisabled = wxUtils.isObj(state.options[activeIndex]) && state.options[activeIndex].disabled;
|
|
294
296
|
if (
|
|
295
297
|
intPreIndex !== intCurIndex
|
|
296
|
-
&& !
|
|
298
|
+
&& !isOverOptionsItem
|
|
297
299
|
&& !isDisabled
|
|
298
300
|
) {
|
|
299
301
|
ownerInstance.callMethod('animationIndexChange', animationIndex);
|
|
@@ -379,10 +381,10 @@ function touchEnd(instanceId) {
|
|
|
379
381
|
currTargetActiveIndex = adjustIndex(Math.round(currTargetActiveIndex), state.options, state.loop);
|
|
380
382
|
targetOffset = -currTargetActiveIndex * state.itemHeight;
|
|
381
383
|
var animationOffset = Math.abs(targetOffset - state.preOffsetting);
|
|
382
|
-
var
|
|
384
|
+
var isOverOptionsLimit = state.loop ? false : state.animationIndex < 0 || state.animationIndex > state.options.length - 1;
|
|
383
385
|
var totalDistance = targetOffset - state.preOffsetting;
|
|
384
386
|
// 如果动画时间大于150ms,并且滚动距离大于itemHeight,则需要进行动态更新列表
|
|
385
|
-
if (state.animationTime > 200 && animationOffset > state.itemHeight && !
|
|
387
|
+
if (state.animationTime > 200 && animationOffset > state.itemHeight && !isOverOptionsLimit) {
|
|
386
388
|
var countOffsetIndex = Math.abs(Math.round(currTargetActiveIndex - state.animationIndex));
|
|
387
389
|
var maxVibrateShort = Math.floor(state.animationTime / 30);
|
|
388
390
|
|
|
@@ -446,6 +448,13 @@ function touchEnd(instanceId) {
|
|
|
446
448
|
}
|
|
447
449
|
}
|
|
448
450
|
|
|
451
|
+
|
|
452
|
+
function updateVisibleOptions(currentIndex, instanceId) {
|
|
453
|
+
var newArr = getVisibleOptions(currentIndex, instanceId);
|
|
454
|
+
updateState(instanceId, 'optionsVIndexList', newArr);
|
|
455
|
+
return newArr
|
|
456
|
+
}
|
|
457
|
+
|
|
449
458
|
var Cache = {}
|
|
450
459
|
|
|
451
460
|
function getVisibleOptions(currentIndex, instanceId) {
|
|
@@ -528,12 +537,6 @@ function getVisibleOptions(currentIndex, instanceId) {
|
|
|
528
537
|
return newArr
|
|
529
538
|
}
|
|
530
539
|
|
|
531
|
-
function updateVisibleOptions(currentIndex, instanceId) {
|
|
532
|
-
var newArr = getVisibleOptions(currentIndex, instanceId);
|
|
533
|
-
updateState(instanceId, 'optionsVIndexList', newArr);
|
|
534
|
-
return newArr
|
|
535
|
-
}
|
|
536
|
-
|
|
537
540
|
function getWrapperCSSVar(instanceId) {
|
|
538
541
|
var state = getCurrState(instanceId);
|
|
539
542
|
var optionsVIndexList = state.optionsVIndexList;
|
|
@@ -541,7 +544,7 @@ function getWrapperCSSVar(instanceId) {
|
|
|
541
544
|
if (currentValue === '' || currentValue === undefined) {
|
|
542
545
|
previousValue['--picker-item-content_' + currentIndex] = '""';
|
|
543
546
|
} else {
|
|
544
|
-
var index =
|
|
547
|
+
var index = currentValue;
|
|
545
548
|
var text = optionText(state.options, index, state.valueKey);
|
|
546
549
|
previousValue['--picker-item-content_' + currentIndex] = '"' + (text === undefined ? '' : text) + '"';
|
|
547
550
|
}
|
|
@@ -583,17 +586,17 @@ function tapItem(instanceId) {
|
|
|
583
586
|
clearTimeout(state.tapTimer);
|
|
584
587
|
updateState(instanceId, 'tapTimer', null);
|
|
585
588
|
}
|
|
586
|
-
var
|
|
587
|
-
var offsetCount = Math.abs(
|
|
588
|
-
updateVisibleOptions(
|
|
589
|
-
updateState(instanceId, 'animationIndex',
|
|
589
|
+
var targetAnimationIndex = getNewAnimationIndex(state.animationIndex, currOptionsActiveIndex, state.options.length || 1, state.loop);
|
|
590
|
+
var offsetCount = Math.abs(targetAnimationIndex - state.animationIndex);
|
|
591
|
+
updateVisibleOptions(targetAnimationIndex, instanceId);
|
|
592
|
+
updateState(instanceId, 'animationIndex', targetAnimationIndex);
|
|
590
593
|
updateWrapperStyle(instanceId, ownerInstance, {
|
|
591
594
|
transition: 'transform ' + 300 + 'ms cubic-bezier(0.2, 0.9, 0.25, 1)'
|
|
592
595
|
});
|
|
593
|
-
ownerInstance.callMethod('animationIndexChange',
|
|
596
|
+
ownerInstance.callMethod('animationIndexChange', targetAnimationIndex);
|
|
594
597
|
ownerInstance.callMethod('vibrateShort', offsetCount, 200);
|
|
595
598
|
var tapTimer = setTimeout(function() {
|
|
596
|
-
ownerInstance.callMethod('activeIndexChange',
|
|
599
|
+
ownerInstance.callMethod('activeIndexChange', targetAnimationIndex);
|
|
597
600
|
updateState(instanceId, 'tapTimer', null);
|
|
598
601
|
setTimeout(function() {
|
|
599
602
|
ownerInstance.callMethod('animationEnd');
|