🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

lighting-ui

Package Overview
Dependencies
Maintainers
3
Versions
123
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lighting-ui - npm Package Compare versions

Comparing version
0.3.129
 to
0.3.130
+1
-1
package.json
{
"name": "lighting-ui",
"version": "0.3.129",
"version": "0.3.130",
"description": "A rich interaction, lightweight, high performance UI library based on Weex",

@@ -5,0 +5,0 @@ "main": "index.js",

+16
-2
packages/lc-actionsheet/index.vue

@@ -8,2 +8,3 @@ <!-- 102111 新增lc-actionsheet弹出选择框 -->

ref="sheetMask"
:style="maskStyle"
@click="close"></div>

@@ -83,2 +84,4 @@ <div

return {
maskOpacity: 0,
contentAnimationStyle: {},
showActionsheet: false,

@@ -91,2 +94,8 @@ mbHeight: 20,

computed: {
maskStyle() {
const { maskOpacity } = this;
return {
opacity: maskOpacity
}
},
listStyle () {

@@ -103,3 +112,3 @@ const titleHeight = 92;

}
const styleObj = { 'height': totalHeight+'px', 'bottom': '-'+ totalHeight + 'px'};
const styleObj = { 'height': totalHeight+'px', 'bottom': '-'+ totalHeight + 'px', ...this.contentAnimationStyle};
return styleObj;

@@ -153,3 +162,6 @@ }

this.displaySheetMask(true, () => {
this.displaySheetContent(true);
this.displaySheetContent(true, () => {
this.contentAnimationStyle = { transform: 'translate(0, -100%)' };
this.maskOpacity = 1;
});
});

@@ -161,2 +173,4 @@ },

this.showActionsheet = false;
this.contentAnimationStyle = { transform: 'translate(0, 100%)' };
this.maskOpacity = 0;
});

@@ -163,0 +177,0 @@ });

+3
-3
packages/lc-button-group/index.vue

@@ -24,3 +24,3 @@ <template>

'border-style': 'solid',
'border-width': '1px',
'border-width': '1.4px',
'border-top-left-radius': '10px',

@@ -33,3 +33,3 @@ 'border-bottom-left-radius': '10px'

'border-style': 'solid',
'border-width': '1px',
'border-width': '1.4px',
'border-left-width': '0px',

@@ -42,3 +42,3 @@ 'border-top-right-radius': '10px',

'border-style': 'solid',
'border-width': '1px',
'border-width': '1.4px',
'border-left-width': '0px'

@@ -45,0 +45,0 @@ }

+4
-0
packages/lc-lightbox-full/index.vue

@@ -8,2 +8,3 @@ <template>

:show="show"
:top="top"
:show-close="false"

@@ -49,2 +50,5 @@ @LcMaskSetHidden="maskOverlayClick">

},
top: {
type: [Number, String]
},
height: {

@@ -51,0 +55,0 @@ type: [Number, String],

+24
-1
packages/lc-loading/index.vue

@@ -71,2 +71,5 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

import Utils from '../utils';
import Light from 'light';
const meta = Light.requireModule('meta');
export default {

@@ -106,2 +109,3 @@ props: {

data: () => ({
loadTop: (Utils.env.getPageHeight() - 200) / 2,
showLoading: false,

@@ -135,3 +139,3 @@ tid: 0

topPosition () {
return (Utils.env.getPageHeight() - 200) / 2;
return this.loadTop;
}

@@ -142,3 +146,22 @@ },

},
mounted() {
let devWidth = meta.getViewport().width;
let deviceWidth = weex.config.env.deviceWidth;
Light.on("screenWidthChange", (res) => {
// weex.config.env.deviceWidth在折叠屏不会变，故目前采用这个缩放比计算，可能有其他更好方案
this.$nextTick(() => {
let newWidth = meta.getViewport().width;
const scale = newWidth / devWidth;
devWidth = newWidth;
deviceWidth = deviceWidth * scale;
this.loadTop = (this.getPageHeight(deviceWidth) - 200) / 2;
});
});
},
methods: {
getPageHeight (deviceWidth) {
const { env } = weex.config;
const navHeight = Utils.env.isWeb() ? 0 : (Utils.env.isIPhoneX() ? 176 : 132);
return env.deviceHeight / (deviceWidth) * 750 - navHeight;
},
maskClicked () {

@@ -145,0 +168,0 @@ this.needMask && (this.$emit('LcLoadingMaskClicked', {}));

+2
-0
packages/lc-mask/index.vue

@@ -208,2 +208,3 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

appearMask (bool, duration = this.duration) {
const that = this;
const { hasAnimation, timingFunction } = this;

@@ -220,2 +221,3 @@ const maskEl = this.$refs['lc-mask'];

}, () => {
that.opacity = bool ? 1 : 0;
this.needEmit(bool);

@@ -222,0 +224,0 @@ });

+14
-1
packages/lc-overlay/index.vue

@@ -58,6 +58,11 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

},
data() {
return {
opacityNow: 0
};
},
computed: {
overlayStyle () {
return {
opacity: this.hasAnimation ? 0 : 1,
opacity: this.hasAnimation ? this.opacityNow : 1,
backgroundColor: `rgba(0, 0, 0,${this.opacity})`

@@ -74,2 +79,9 @@ }

},
watch: {
show(val, oldVal) {
if (val === false) {
this.opacityNow = 0;
}
}
},
methods: {

@@ -99,2 +111,3 @@ overlayClicked (e) {

}, () => {
this.opacityNow = bool ? 1 : 0;
needEmit && (this.$emit('LcOverlayBodyClicked', {}));

@@ -101,0 +114,0 @@ });

+7
-1
packages/lc-page-calendar/index.vue

@@ -6,3 +6,3 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

<template>
<div class="lc-page-calendar"
<div class="lc-page-calendar" :style="calendarStyle"
ref="pageCalendar">

@@ -94,2 +94,3 @@ <lc-minibar :show="showTitle"

data: () => ({
transformStyle: {},
isShow: false,

@@ -102,2 +103,5 @@ reSelect: true,

computed: {
calendarStyle() {
return {...this.transformStyle};
},
monthsArray () {

@@ -199,2 +203,3 @@ const { dateRange: range, today, departDate, arriveDate, selectedNote, descList } = this;

_animate (width = 0) {
const that = this;
const duration = isWeb ? 200 : 300;

@@ -208,2 +213,3 @@ animation.transition(this.$refs.pageCalendar, {

}, () => {
that.transformStyle = { transform: `translateX(${-width}px)` };
});

@@ -210,0 +216,0 @@ },

+18
-9
packages/lc-popover/index.vue

@@ -65,2 +65,4 @@ <!-- 95735 新增lc-popover气泡菜单组件 -->

data: () => ({
popoverStyle: {},
coverNowStyle: {},
show: false,

@@ -71,3 +73,3 @@ showIn: false

coverStyle() {
return this.coverColor ? { backgroundColor: this.coverColor, opacity:this.hasAnimation||!this.showIn?'0':'1'} : '';
return this.coverColor ? { backgroundColor: this.coverColor, opacity:this.hasAnimation||!this.showIn?'0':'1', ...this.coverNowStyle} : '';
},

@@ -122,2 +124,3 @@ transformOrigin() {

style.transformOrigin = this.transformOrigin;
style = Object.assign({}, style, this.popoverStyle);
return style;

@@ -182,8 +185,9 @@ },

let a1End = false,a2End = false;
animation.transition(popoverEl, {
styles: {
const styles = {
opacity: 1,
transform: "scale(1)",
transformOrigin: this.transformOrigin
},
};
animation.transition(popoverEl, {
styles: styles,
delay:0,

@@ -193,2 +197,3 @@ duration: 250,

}, (e) => {
this.popoverStyle = {...styles};
a1End = true;

@@ -208,2 +213,3 @@ if(a1End && a2End){

}, (e) => {
this.coverNowStyle = { opacity: 1 };
a2End = true;

@@ -237,10 +243,12 @@ if(a1End && a2End){

let a1End = false,a2End = false;
const styles = {
opacity: 0,
transform: this.contentTransform,
transformOrigin: this.transformOrigin
};
animation.transition(popoverEl, {
styles: {
opacity: 0,
transform: this.contentTransform,
transformOrigin: this.transformOrigin
},
styles: styles,
duration: 10 //92479 需求97505：在H5下weex-vue-render4light会报lines错误-快速点击有动画效果的按钮，几次之后，发现不再弹出气泡弹层
}, () => {
this.popoverStyle = {...styles};
a1End = true;

@@ -259,2 +267,3 @@ if(a1End && a2End){

}, () => {
this.coverNowStyle = { opacity: 0 };
a2End = true;

@@ -261,0 +270,0 @@ if(a1End && a2End){

+7
-2
packages/lc-popup/index.vue

@@ -110,2 +110,3 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

data: () => ({
transformStyle: {},
haveOverlay: true,

@@ -145,4 +146,5 @@ isOverShow: true,

padStyle () {
const { pos, width, height, popupColor } = this;
const { pos, width, height, popupColor, transformStyle } = this;
let style = {
...transformStyle,
width: `${width}px`,

@@ -191,5 +193,7 @@ backgroundColor: popupColor

}
const that = this;
const transformStyle = this.getTransform(this.pos, this.width, this.height, !bool);
animation.transition(popupEl, {
styles: {
transform: this.getTransform(this.pos, this.width, this.height, !bool)
transform: transformStyle
},

@@ -200,2 +204,3 @@ duration,

}, () => {
that.transformStyle = { transform: transformStyle };
if (!bool) {

@@ -202,0 +207,0 @@ this.$emit('LcPopupOverlayClicked', { pos: this.pos });

+4
-6
packages/lc-slider-menu/index.vue

@@ -269,6 +269,4 @@ <!--145501 【TS:201906120789-财富业委会_杨哲宇-【需求类型】 需求【需求描述】 希望提供一个左右联动】-->

},
created() {
this.$nextTick(() => {
this._calculateHeight();
})
mounted() {
this._calculateHeight();
},

@@ -279,4 +277,4 @@ computed: {

const { scrollY, rightTops } = this
let index = rightTops.findIndex((height, index) => {
return scrollY >= rightTops[index] && scrollY < rightTops[index + 1]
let index = rightTops.findIndex((height, i) => {
return scrollY >= rightTops[i] && scrollY < rightTops[i + 1]
})

@@ -283,0 +281,0 @@ if (scrollY > rightTops[index] + 50) {

+12
-2
packages/lc-swipe-cell/index.vue

@@ -12,3 +12,3 @@ <!-- 102109 新增lc-swipe-cell滑动菜单组件 -->

</div>
<div @click="_click" @swipe="_swipe($event)" class="bui-list-main bui-list-swipe-main" ref="swipedom">
<div @click="_click" @swipe="_swipe($event)" :style="cellMainStyle" class="bui-list-main bui-list-swipe-main" ref="swipedom">
<div class="bui-list-main-left">

@@ -99,3 +99,3 @@ <slot name="content">

return {
ss : ''
transformStyle: {}
}

@@ -131,2 +131,7 @@ },

},
computed: {
cellMainStyle() {
return { ...this.transformStyle };
}
},
methods: {

@@ -188,2 +193,7 @@ //操作点击事件

}, () => {
this.transformStyle = {
opacity: opacity,
transform: translate,
transformOrigin: 'center center'
};
fn && fn();

@@ -190,0 +200,0 @@ });

+185
-225
packages/lc-switch/index.vue
<template>
<div>
<div class="toggle-container0" :style="{ backgroundColor: defaultBgc}" @click="toggle" ref="bg" v-if="!opened">
<div class="toggle-ball0" ref="ball" ></div>
</div>
<div class="toggle-container1" :style="{ backgroundColor: checkedtBgc}" @click="toggle" ref="bg" v-if="opened">
<div class="toggle-ball1" ref="ball" ></div>
</div>
<div>
<div
class="toggle-container0"
:style="{ backgroundColor: defaultBgc }"
@click="toggle"
ref="bg"
>
<div class="toggle-ball0" ref="ball"></div>
</div>
<lc-dialog :type="type"
:title="title"
:confirm-text="confirmText"
:cancel-text="cancelText"
:show="show"
@LcDialogCancelBtnClicked="dialogCancelBtnClick"
@LcDialogConfirmBtnClicked="dialogConfirmBtnClick"></lc-dialog>
</div>
<lc-dialog
:type="type"
:title="title"
:confirm-text="confirmText"
:cancel-text="cancelText"
:show="show"
@LcDialogCancelBtnClicked="dialogCancelBtnClick"
@LcDialogConfirmBtnClicked="dialogConfirmBtnClick"
></lc-dialog>
</div>
</template>
<style scoped>
.toggle-container0{
width: 100px;
height: 50px;
border-radius: 25px;
position: relative;
flex-direction: row;
align-items: center;
}
.toggle-container1{
width: 100px;
height: 50px;
border-radius: 25px;
position: relative;
flex-direction: row;
align-items: center;
}
.toggle-ball0{
width: 46px;
height: 46px;
border-radius: 46px;
margin-left: 5px;
background-color: #ffffff;
}
.toggle-ball1{
width: 46px;
height: 46px;
border-radius: 46px;
margin-left: 50px;
background-color: #ffffff;
}
.toggle-container0 {
background: lightcoral;
width: 100px;
height: 50px;
border-radius: 25px;
position: relative;
flex-direction: row;
align-items: center;
}
.toggle-ball0 {
width: 46px;
height: 46px;
border-radius: 46px;
background-color: #ffffff;
transform: translate(0, 0);
}
</style>
<script>
const animation = weex.requireModule('animation');
var modal = weex.requireModule('modal');
import LcDialog from '../lc-dialog';
const animation = weex.requireModule("animation");
var modal = weex.requireModule("modal");
import LcDialog from "lighting-ui/packages/lc-dialog";
export default {
// name: "toggle",
components: { LcDialog },
props: {
opened: {
default: true
},
autoSwitch:{
default: true
},
width: {
type: [Number, String],
default: 100
},
defaultBgc:{
default: '#cccccc'
},
checkedtBgc:{
default: '#3580ed'
},
export default {
// name: "toggle",
title: {
type: [String],
default: '确定吗？'
},
confirmText: {
type: [String],
default: '确定'
},
cancelText: {
type: [String],
default: '取消'
},
components: { LcDialog },
props: {
opened: {
default: true,
},
autoSwitch: {
default: true,
},
width: {
type: [Number, String],
default: 100,
},
defaultBgc: {
default: "#cccccc",
},
checkedtBgc: {
default: "#3580ed",
},
title: {
type: [String],
default: "确定吗？",
},
confirmText: {
type: [String],
default: "确定",
},
cancelText: {
type: [String],
default: "取消",
},
},
data() {
return {
isOpened: this.opened,
type: "confirm",
show: false,
screenWidth: 0,
};
},
mounted() {
this.opened ? this.open() : this.close();
// 监听屏幕大小，是否折叠
this.$light.on("screenWidthChange", (res) => {
this.screenWidth = res;
this.isOpened ? this.open() : this.close();
});
},
methods: {
open() {
var el = this.$refs.ball;
var bg = this.$refs.bg;
animation.transition(
el,
{
styles: {
transform: "translate(50px, 0px)",
},
duration: 300,
timingFunction: "ease",
delay: 0,
},
data(){
return {
isOpened: this.opened,
function () {}
);
animation.transition(
bg,
{
styles: {
backgroundColor: this.checkedtBgc,
},
duration: 300,
timingFunction: "ease",
delay: 0,
},
function () {}
);
},
type: 'confirm',
show: false,
}
close() {
var el = this.$refs.ball;
var bg = this.$refs.bg;
animation.transition(
el,
{
styles: {
transform: "translate(2px, 0px)",
},
duration: 300,
timingFunction: "ease",
delay: 0,
},
watch:{
opened(val){
this.isOpened=val;
}
function () {}
);
animation.transition(
bg,
{
styles: {
backgroundColor: this.defaultBgc,
},
duration: 300,
timingFunction: "ease",
delay: 0,
},
methods:{
open0(){
var el = this.$refs.ball;
var bg = this.$refs.bg;
animation.transition(el, {
styles: {
transform: 'translate(48px, 0px)',
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
animation.transition(bg, {
styles: {
backgroundColor: this.checkedtBgc,
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
},
close0(){
var el = this.$refs.ball;
var bg = this.$refs.bg;
animation.transition(el, {
styles: {
transform: 'translate(-2px, 0px)',
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
animation.transition(bg, {
styles: {
backgroundColor: this.defaultBgc,
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
},
open1(){
var el = this.$refs.ball;
var bg = this.$refs.bg;
animation.transition(el, {
styles: {
transform: 'translate(-2px, 0px)',
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
animation.transition(bg, {
styles: {
backgroundColor: this.checkedtBgc,
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
},
close1(){
var el = this.$refs.ball;
var bg = this.$refs.bg;
animation.transition(el, {
styles: {
transform: 'translate(-48px, 0px)',
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
animation.transition(bg, {
styles: {
backgroundColor: this.defaultBgc,
},
duration: 300,
timingFunction: 'ease',
delay: 0
}, function () {}
)
},
toggle(){
var that = this;
if(!this.autoSwitch){
that.show=true;
}else{
if(!that.opened){
if(that.isOpened){
that.close0();
}else{
that.open0();
}
}else{
if(that.isOpened){
that.close1();
}else{
that.open1();
}
}
this.isOpened = !this.isOpened;
this.$emit('toggle', this.isOpened);
}
function () {}
);
},
},
dialogConfirmBtnClick(){
var that = this;
if(!that.opened){
if(that.isOpened){
that.close0();
}else{
that.open0();
}
}else{
if(that.isOpened){
that.close1();
}else{
that.open1();
}
}
that.isOpened = !that.isOpened;
that.$emit('toggle', that.isOpened);
this.show=false;
},
dialogCancelBtnClick(){
this.show=false;
}
toggle() {
if (!this.autoSwitch) {
this.show = true;
} else {
this.isOpened = !this.isOpened;
this.isOpened ? this.open() : this.close();
}
};
this.$emit("toggle", this.isOpened);
}
},
dialogConfirmBtnClick() {
this.isOpened = !this.isOpened;
this.isOpened ? this.open() : this.close();
this.$emit("toggle", this.isOpened);
this.show = false;
},
dialogCancelBtnClick() {
this.show = false;
},
},
};
</script>
+252
-198
packages/lc-tab-bar/index.vue

@@ -6,31 +6,64 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

<template>
<div class="lc-tab-page"
:style="{ height: (tabPageHeight)+'px', backgroundColor:wrapBgColor }">
<div class="tab-page-wrap"
ref="tab-page-wrap"
:style="{ height: (tabPageHeight-tabStyles.height)+'px' }">
<div ref="tab-container"
class="tab-container">
<div
class="lc-tab-page"
:style="{ height: tabPageHeight + 'px', backgroundColor: wrapBgColor }"
>
<div
class="tab-page-wrap"
ref="tab-page-wrap"
:style="{ height: tabPageHeight - tabStyles.height + 'px' }"
>
<scroller ref="tab-container" class="tab-container">
<slot></slot>
</div>
</scroller>
</div>
<div class="tab-title-list"
:style="{ backgroundColor: tabStyles.bgColor, height: (tabStyles.height)+'px'}">
<div class="title-item"
v-for="(v,index) in tabTitles"
:key="index"
:ref="'wxc-tab-title-'+index"
@click="setPage(index,v.url)"
:style="{ width: tabStyles.width +'px', height: tabStyles.height +'px', backgroundColor: currentPage == index ? tabStyles.activeBgColor : tabStyles.bgColor }"
:accessible="true"
:aria-label="`${v.title?v.title:'标签'+index}`">
<image :src="currentPage == index ? v.activeIcon : v.icon"
v-if="titleType === 'icon'"
:style="{ width: tabStyles.iconWidth + 'px', height:tabStyles.iconHeight+'px'}"></image>
<div
class="tab-title-list"
:style="{
backgroundColor: tabStyles.bgColor,
height: tabStyles.height + 'px',
}"
>
<div
class="title-item"
v-for="(v, index) in tabTitles"
:key="index"
:ref="'wxc-tab-title-' + index"
@click="setPage(index, v.url)"
:style="{
width: tabStyles.width + 'px',
height: tabStyles.height + 'px',
backgroundColor:
currentPage == index ? tabStyles.activeBgColor : tabStyles.bgColor,
}"
:accessible="true"
:aria-label="`${v.title ? v.title : '标签' + index}`"
>
<image
:src="currentPage == index ? v.activeIcon : v.icon"
v-if="titleType === 'icon'"
:style="{
width: tabStyles.iconWidth + 'px',
height: tabStyles.iconHeight + 'px',
}"
></image>
<text
:style="{ fontSize: tabStyles.fontSize+'px', fontWeight: (currentPage == index && tabStyles.isActiveTitleBold)? 'bold' : 'normal', color: currentPage == index ? tabStyles.activeTitleColor : tabStyles.titleColor, paddingLeft:tabStyles.textPaddingLeft+'px', paddingRight:tabStyles.textPaddingRight+'px'}"
class="tab-text">{{v.title}}</text>
:style="{
fontSize: tabStyles.fontSize + 'px',
fontWeight:
currentPage == index && tabStyles.isActiveTitleBold
? 'bold'
: 'normal',
color:
currentPage == index
? tabStyles.activeTitleColor
: tabStyles.titleColor,
paddingLeft: tabStyles.textPaddingLeft + 'px',
paddingRight: tabStyles.textPaddingRight + 'px',
}"
class="tab-text"
>{{ v.title }}</text
>
<div class="desc-tag" v-if="v.badge">
<text class="desc-text">{{v.badge}}</text>
<text class="desc-text">{{ v.badge }}</text>
</div>

@@ -44,198 +77,219 @@ <div v-if="v.dot && !v.badge" class="dot"></div>

<style scoped>
.lc-tab-page {
width: 750px;
flex-direction: column;
}
.lc-tab-page {
width: 750px;
flex-direction: column;
}
.tab-title-list {
width: 750px;
position: fixed;
bottom: 0;
left: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.tab-title-list {
width: 750px;
position: fixed;
bottom: 0;
left: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.title-item {
justify-content: center;
align-items: center;
flex-direction: column;
border-bottom-style: solid;
position: relative;
}
.title-item {
justify-content: center;
align-items: center;
flex-direction: column;
border-bottom-style: solid;
position: relative;
}
.tab-page-wrap {
width: 750px;
overflow: hidden;
position: relative;
}
.tab-page-wrap {
width: 750px;
overflow: hidden;
position: relative;
}
.tab-container {
flex: 1;
flex-direction: row;
position: absolute;
}
.tab-container {
flex: 1;
flex-direction: row;
position: absolute;
}
.tab-text {
lines: 1;
text-overflow: ellipsis;
}
.tab-text {
lines: 1;
text-overflow: ellipsis;
}
.desc-tag {
position: absolute;
top: 10px;
right: 20px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 0;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
background-color: #FF5E00;
height: 26px;
align-items: center;
justify-content: center;
padding-left: 6px;
padding-right: 6px;
}
.desc-tag {
position: absolute;
top: 10px;
right: 20px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 0;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
background-color: #ff5e00;
height: 26px;
align-items: center;
justify-content: center;
padding-left: 6px;
padding-right: 6px;
}
.dot{
width: 12px;
height: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: absolute;
top: 10px;
right: 40px;
background-color: #FF5E00;
}
.desc-text {
font-size: 18px;
color: #ffffff;
}
.dot {
width: 12px;
height: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: absolute;
top: 10px;
right: 40px;
background-color: #ff5e00;
}
.desc-text {
font-size: 18px;
color: #ffffff;
}
</style>
<script>
const dom = weex.requireModule('dom');
const animation = weex.requireModule('animation');
const dom = weex.requireModule("dom");
const animation = weex.requireModule("animation");
export default {
props: {
tabTitles: {
type: Array,
default: () => ([])
},
tabStyles: {
type: Object,
default: () => ({
bgColor: '#FFFFFF',
titleColor: '#666666',
activeTitleColor: '#3D3D3D',
activeBgColor: '#FFFFFF',
isActiveTitleBold: true,
iconWidth: 70,
iconHeight: 70,
width: 160,
height: 120,
fontSize: 24,
activeBottomColor: '#FFC900',
activeBottomWidth: 120,
activeBottomHeight: 6,
textPaddingLeft: 10,
textPaddingRight: 10
})
},
titleType: {
type: String,
default: 'icon'
},
tabPageHeight: {
type: [String, Number],
default: 1334
},
isTabView: {
type: Boolean,
default: true
},
duration: {
type: [Number, String],
default: 300
},
timingFunction: {
type: String,
default: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
},
wrapBgColor: {
type: String,
default: '#f2f3f4'
export default {
props: {
tabTitles: {
type: Array,
default: () => [],
},
tabStyles: {
type: Object,
default: () => ({
bgColor: "#FFFFFF",
titleColor: "#666666",
activeTitleColor: "#3D3D3D",
activeBgColor: "#FFFFFF",
isActiveTitleBold: true,
iconWidth: 70,
iconHeight: 70,
width: 160,
height: 120,
fontSize: 24,
activeBottomColor: "#FFC900",
activeBottomWidth: 120,
activeBottomHeight: 6,
textPaddingLeft: 10,
textPaddingRight: 10,
}),
},
titleType: {
type: String,
default: "icon",
},
tabPageHeight: {
type: [String, Number],
default: 1334,
},
isTabView: {
type: Boolean,
default: true,
},
duration: {
type: [Number, String],
default: 300,
},
timingFunction: {
type: String,
default: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
},
wrapBgColor: {
type: String,
default: "#f2f3f4",
},
},
data: () => ({
currentPage: 0,
translateX: 0,
screenWidth: 750,
}),
mounted() {
this.$light.on("screenWidthChange", (res) => {
console.log("res: " + res);
console.log("this.screenWidth: " + this.screenWidth);
const rate = res / this.screenWidth;
this.screenWidth = res;
this.$nextTick(() => {
this.setPage(this.currentPage, null, false);
this.$emit("screenChange", { rate });
});
});
},
methods: {
next() {
let page = this.currentPage;
if (page < this.tabTitles.length - 1) {
page++;
}
this.setPage(page);
},
data: () => ({
currentPage: 0,
translateX: 0
}),
methods: {
next () {
let page = this.currentPage;
if (page < this.tabTitles.length - 1) {
page++;
}
this.setPage(page);
},
prev () {
let page = this.currentPage;
if (page > 0) {
page--;
}
this.setPage(page);
},
setPage (page, url = null, animated = true) {
if (!this.isTabView) {
this.jumpOut(url);
return;
}
const previousPage = this.currentPage;
const currentTabEl = this.$refs[`wxc-tab-title-${page}`][0];
const { width } = this.tabStyles;
const appearNum = parseInt(750 / width);
const tabsNum = this.tabTitles.length;
const offset = page > appearNum ? -(750 - width) / 2 : -width * 2;
prev() {
let page = this.currentPage;
if (page > 0) {
page--;
}
this.setPage(page);
},
setPage(page, url = null, animated = true) {
if (!this.isTabView) {
this.jumpOut(url);
return;
}
const previousPage = this.currentPage;
const currentTabEl = this.$refs[`wxc-tab-title-${page}`][0];
const { width } = this.tabStyles;
const appearNum = parseInt(750 / width);
const tabsNum = this.tabTitles.length;
const offset = page > appearNum ? -(750 - width) / 2 : -width * 2;
if (appearNum < tabsNum) {
(previousPage > appearNum || page > 1) && dom.scrollToElement(currentTabEl, {
offset, animated
if (appearNum < tabsNum) {
(previousPage > appearNum || page > 1) &&
dom.scrollToElement(currentTabEl, {
offset,
animated,
});
page <= 1 && previousPage > page && dom.scrollToElement(currentTabEl, {
page <= 1 &&
previousPage > page &&
dom.scrollToElement(currentTabEl, {
offset: -width * page,
animated
animated,
});
}
}
this.currentPage = page;
this._animateTransformX(page, animated);
this.$emit('LcTabBarCurrentTabSelected', { page });
},
jumpOut (url) {
url && Utils.goToH5Page(url)
},
_animateTransformX (page, animated) {
const { duration, timingFunction } = this;
// 134033 【TS:201904160183-财富业委会-彭泉善-【需求内容】 1、UI组件缺陷：lc】
const computedDur = animated ? duration : 0;
const containerEl = this.$refs[`tab-container`];
const dist = page * 750;
animation.transition(containerEl, {
this.currentPage = page;
this._animateTransformX(page, animated);
this.$emit("LcTabBarCurrentTabSelected", { page });
},
jumpOut(url) {
url && Utils.goToH5Page(url);
},
_animateTransformX(page, animated) {
const { duration, timingFunction } = this;
// 134033 【TS:201904160183-财富业委会-彭泉善-【需求内容】 1、UI组件缺陷：lc】
const computedDur = animated ? duration : 0;
const containerEl = this.$refs[`tab-container`];
const dist = page * 750;
animation.transition(
containerEl,
{
styles: {
transform: `translateX(${-dist}px)`
transform: `translateX(${-dist}px)`,
},
duration: computedDur,
timingFunction,
delay: 0
}, () => {
});
}
}
};
delay: 0,
},
() => {}
);
},
},
};
</script>
+26
-8
packages/lc-tab-page/index.vue

@@ -112,3 +112,3 @@ <!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->

@horizontalpan="startHandler"
:style="{ height: (tabPageHeight-tabStyles.height)+'px' }">
:style="{ height: (tabPageHeight-tabStyles.height)+'px', width: '100%', }">
<div ref="tab-container" class="tab-container">

@@ -229,3 +229,2 @@ <slot></slot>

.tab-page-wrap {
width: 750px;
overflow: hidden;

@@ -253,3 +252,3 @@ position: relative;

import Utils from '../utils';
import Utils from 'lighting-ui/packages/utils';

@@ -388,3 +387,4 @@ const supportsEB = Utils.env.supportsEB();

startPosY: 0,
judge: 'INITIAL'
judge: 'INITIAL',
screenWidth: 750
}),

@@ -399,2 +399,9 @@ computed:{

mounted () {
this.$light.on("screenWidthChange", (res) => {
this.screenWidth = res;
this.$nextTick(()=>{
this.setPage(this.currentPage)
})
});
if (swipeBack && swipeBack.forbidSwipeBack) {

@@ -440,3 +447,5 @@ swipeBack.forbidSwipeBack(true);

const { currentPage, panDist } = this;
const dist = currentPage * 750;
// const dist = currentPage * 750;
const dist = currentPage * this.screenWidth;
// x-dist

@@ -463,2 +472,3 @@ const args = [{

setPage (page, url = null, animated = true) {
console.log("setPage");
if (!this.isTabView) {

@@ -475,5 +485,7 @@ this.jumpOut(url);

const { width } = this.tabStyles;
const appearNum = parseInt(750 / width);
// const appearNum = parseInt(750 / width);
const appearNum = parseInt(this.screenWidth / width);
const tabsNum = this.tabTitles.length;
const offset = page > appearNum ? -(750 - width) / 2 : -width * 2;
// const offset = page > appearNum ? -(750 - width) / 2 : -width * 2;
const offset = page > appearNum ? -(this.screenWidth - width) / 2 : -width * 2;

@@ -509,2 +521,3 @@ if (appearNum < tabsNum) {

_animateTransformX (page, animated) {
console.log("_animateTransformX");
const { duration, timingFunction } = this;

@@ -514,3 +527,8 @@ // 134033 【TS:201904160183-财富业委会-彭泉善-【需求内容】 1、UI组件缺陷：lc】

const containerEl = this.$refs[`tab-container`];
const dist = page * 750;
dom.getComponentRect(containerEl,(res)=>{
console.log("getComponentRect"+JSON.stringify(res))
})
// const dist = page * 750;
const dist = page * this.screenWidth;
console.log("_animateTransformX==="+dist);
animation.transition(containerEl, {

@@ -517,0 +535,0 @@ styles: {

+3
-0
README_cn.md

@@ -134,2 +134,5 @@ > lighting ui 是一个基于 [Weex](https://weex.apache.org/zh/) 的富交互、轻量级、高性能、三端统一的 金融 UI 组件库。

#### v0.3.130
1. mask等组件兼容折叠屏
#### v0.3.116

@@ -136,0 +139,0 @@ 1. #145501 新增lc-slider-menu组件。

readme.markdown

Sorry, the diff of this file is not supported yet