new version 0.6.13
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5693e66..86e6aa4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
# Change Log
+## 0.6.13
+- [!] fixed[wxc-overlay](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/)problem on[wxc-tab-bar](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/)
+- [+] add wxc-swipe-action
+- [!] [!] Fix [wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) displaying style problem, add isHighlight attribute to control whether button is highlighted or not.
+
## 0.6.12
- [!] Fixed set transparency issues [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/).
- [!] Fixed set transparency issues [wxc-mask](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-mask/).
diff --git a/CHANGELOG_cn.md b/CHANGELOG_cn.md
index 21e215b..8bd747c 100644
--- a/CHANGELOG_cn.md
+++ b/CHANGELOG_cn.md
@@ -1,5 +1,10 @@
# 升级日志
+## 0.6.13
+- [!] 修复[wxc-overlay](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/)在[wxc-tab-bar](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/)上使用问题
+- [+] 添加wxc-swipe-action侧滑组件
+- [!] 修复[wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) 设置display样式问题，添加isHighlight属性控制button是否高亮显示
+
## 0.6.12
- [!] 修复 [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/) 设置透明度问题
- [!] 修复 [wxc-mask](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-mask/) 设置透明度问题
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
index 1ca30a8..df08cd9 100644
--- a/docs/_coverpage.md
+++ b/docs/_coverpage.md
@@ -1,6 +1,6 @@
<img src="https://img.alicdn.com/tfs/TB1kCs_er_I8KJjy1XaXXbsxpXa-419-495.png" width="146px">
-# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.12</span>
+# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.13</span>
> <span style="line-height:1.8rem;font-weight:400;font-size:1.3rem">A rich interaction, lightweight, high performance UI library.<span>
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 18173b1..4dea105 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -9,6 +9,7 @@
- [wxc-popup](packages/wxc-popup/)
- [wxc-result](packages/wxc-result/)
- [wxc-slide-nav](packages/wxc-slide-nav/)
+ - [wxc-swipe-action](packages/wxc-swipe-action/)
- Navigator
- [wxc-minibar](packages/wxc-minibar/)
diff --git a/docs/_sidebar_cn.md b/docs/_sidebar_cn.md
index f5688b5..4d1ddec 100644
--- a/docs/_sidebar_cn.md
+++ b/docs/_sidebar_cn.md
@@ -9,6 +9,8 @@
- [wxc-popup 弹层](cn/packages/wxc-popup/)
- [wxc-result 结果页](cn/packages/wxc-result/)
- [wxc-slide-nav 视窗增大](cn/packages/wxc-slide-nav/)
+ - [wxc-swipe-action 滑动操作 cell](cn/packages/wxc-swipe-action/)
+
- 导航
- [wxc-minibar 导航栏](cn/packages/wxc-minibar/)
diff --git a/example/swipe-action/index.js b/example/swipe-action/index.js
new file mode 100644
index 0000000..6191d83
--- /dev/null
+++ b/example/swipe-action/index.js
@@ -0,0 +1,4 @@
+import entry from './index.vue'
+
+entry.el = '#root'
+export default new Vue(entry)
diff --git a/example/swipe-action/index.vue b/example/swipe-action/index.vue
new file mode 100644
index 0000000..4ffefd7
--- /dev/null
+++ b/example/swipe-action/index.vue
@@ -0,0 +1,86 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
+<template>
+<div>
+ <scroller class="wxc-demo">
+ <title title="wxc-swipe-action"></title>
+ <category title="使用案例"></category>
+ <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+ </scroller>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from "../../index";
+const modal = weex.requireModule("modal");
+import Title from "../_mods/title.vue";
+import Category from "../_mods/category.vue";
+import { setTitle } from '../_mods/set-nav';
+
+export default {
+ components: {
+ Title,
+ Category,
+ WxcSwipeAction
+ },
+ data() {
+ return {
+ data: [
+ {
+ title: "点击右边按钮隐藏",
+ autoClose: true,
+ right: [
+ {
+ text: "置顶",
+ onPress: function() {
+ modal.toast({
+ message: "置顶",
+ duration: 0.3
+ });
+ }
+ },
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "默认效果",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ }
+ ]
+ };
+ },
+ created() {
+ setTitle("SwipeAction");
+ },
+ methods: {
+ onTest(node, i) {
+ modal.toast({
+ message: node.title,
+ duration: 0.3
+ });
+ }
+ }
+};
+</script>
+
diff --git a/index.js b/index.js
index 72009a4..09f7c7c 100644
--- a/index.js
+++ b/index.js
@@ -40,6 +40,7 @@
import WxcSliderBar from './packages/wxc-slider-bar';
import WxcSpecialRichText from './packages/wxc-special-rich-text';
import WxcStepper from './packages/wxc-stepper';
+import WxcSwipeAction from './packages/wxc-swipe-action';
import WxcTabBar from './packages/wxc-tab-bar';
import WxcTabPage from './packages/wxc-tab-page';
import WxcTag from './packages/wxc-tag';
@@ -82,6 +83,7 @@
WxcSliderBar,
WxcSpecialRichText,
WxcStepper,
+ WxcSwipeAction,
WxcTabBar,
WxcTabPage,
WxcTag
diff --git a/package.json b/package.json
index 532b980..1db4c8c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "weex-ui",
- "version": "0.6.12",
+ "version": "0.6.13",
"description": "A rich interaction, lightweight, high performance UI library based on Weex",
"main": "index.js",
"lib": "vue",
diff --git a/packages/wxc-button/README.md b/packages/wxc-button/README.md
index 00c92e8..7610c3f 100644
--- a/packages/wxc-button/README.md
+++ b/packages/wxc-button/README.md
@@ -39,6 +39,7 @@
| **`type`** | `String` | `N` | `red` | can be set to `white`/`red`/`yellow`/`blue`/`green` |
| **`size`** | `String` | `N` | `full` | can be set to `full`/`big`/`medium`/`small` |
| **`disabled`** | `Boolean` | `N` | `false` | set disabled（*1） |
+| **`isHighlight`** | `Boolean` | `N` | `false` | Whether to highlight |
| **`btnStyle`** | `Object` | `N` | `{}` | custom style about button（*2） |
| **`textStyle`** | `Object` | `N` | `{}` | custom style about text （*3） |
diff --git a/packages/wxc-button/README_cn.md b/packages/wxc-button/README_cn.md
index 4983529..3b473e9 100644
--- a/packages/wxc-button/README_cn.md
+++ b/packages/wxc-button/README_cn.md
@@ -38,6 +38,7 @@
| **`type`** | `String` | `N` | `red` | 类型：`white`/`red`/`yellow`/`blue`/`green` |
| **`size`** | `String` | `N` | `full` | 类型：`full`/`big`/`medium`/`small` |
| **`disabled`** | `Boolean` | `N` | `false` | 是否 disabled（注1） |
+| **`isHighlight`** | `Boolean` | `N` | `false` | 是否高亮显示 |
| **`btnStyle`** | `Object` | `N` | `{}` | 按钮的样式对象（注2） |
| **`textStyle`** | `Object` | `N` | `{}` | 文字的样式对象（注3） |
diff --git a/packages/wxc-button/index.vue b/packages/wxc-button/index.vue
index b0150a6..f9cb1db 100644
--- a/packages/wxc-button/index.vue
+++ b/packages/wxc-button/index.vue
@@ -2,7 +2,7 @@
<!-- Created by Tw93 on 17/07/28. -->
<template>
- <div class="wxc-btn"
+ <div :class="['wxc-btn', isHighlight && !disabled && 'wxc-btn-highlight']"
:style="mrBtnStyle"
@click="onClicked"
:accessible="true"
@@ -32,6 +32,10 @@
type: Boolean,
default: false
},
+ isHighlight: {
+ type: Boolean,
+ default: false
+ },
btnStyle: Object,
textStyle: Object,
disabledStyle: Object
@@ -81,7 +85,7 @@
opacity: 1;
}
- .wxc-btn:active {
+ .wxc-btn-highlight:active {
opacity: .8;
}
diff --git a/packages/wxc-dialog/README.md b/packages/wxc-dialog/README.md
index b07c5b1..3b66643 100644
--- a/packages/wxc-dialog/README.md
+++ b/packages/wxc-dialog/README.md
@@ -74,6 +74,7 @@
|-------------|------------|--------|-----|-----|
| title | `String` | `Y` | `-` | title (only transparent) |
| content | `String` | `N` | `-`| content |
+| left | `Number` |`N`| `0` | move left distance |
| top | `Number` | `N` |`400` | distance from the top of the screen |
| single | `Boolean` | `N` |`false` | whether is single button |
| confirm-text | `String` | `N` |`确定` | text of the primary button |
diff --git a/packages/wxc-dialog/README_cn.md b/packages/wxc-dialog/README_cn.md
index 10e9b2e..3197a65 100644
--- a/packages/wxc-dialog/README_cn.md
+++ b/packages/wxc-dialog/README_cn.md
@@ -73,6 +73,7 @@
| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| title | `String` | `Y` | `-` | 标题 |
+| left | `Number` |`N`| `0` | 向左移动距离 |
| content | `String` | `N` | `-`| 内容说明描述 |
| top | `Number` | `N` |`400` | 弹层距离顶部的高度 |
| single | `Boolean` | `N` |`false` | 是否只有一个按钮（显示确认） |
diff --git a/packages/wxc-dialog/index.vue b/packages/wxc-dialog/index.vue
index f667810..fa21e6a 100644
--- a/packages/wxc-dialog/index.vue
+++ b/packages/wxc-dialog/index.vue
@@ -4,8 +4,8 @@
<template>
<div class="container">
- <wxc-overlay v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
- <div class="dialog-box" v-if="show" :style="{top:top+'px'}">
+ <wxc-overlay :left='left' v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
+ <div class="dialog-box" v-if="show" :style="{top:top+'px', left: ((isWeb ? left : 0) + 96) + 'px'}">
<div class="dialog-content">
<slot name="title">
<text class="content-title">{{title}}</text>
@@ -118,6 +118,7 @@
<script>
import WxcOverlay from '../wxc-overlay'
import { CHECKED, UN_CHECKED } from './type';
+ import Utils from '../utils';
export default {
components: { WxcOverlay },
@@ -169,11 +170,16 @@
isChecked: {
type: Boolean,
default: false
+ },
+ left: {
+ type: Number,
+ default: 0
}
},
data: () => ({
noPromptIcon: UN_CHECKED,
- pageHeight: 1334
+ pageHeight: 1334,
+ isWeb: Utils.env.isWeb()
}),
created () {
const { env: { deviceHeight, deviceWidth } } = weex.config;
diff --git a/packages/wxc-overlay/README.md b/packages/wxc-overlay/README.md
index 98208be..e3473f2 100644
--- a/packages/wxc-overlay/README.md
+++ b/packages/wxc-overlay/README.md
@@ -50,6 +50,7 @@
|-------------|------------|--------|-----|
| show | `Boolean` |`Y`| `false` | whether to show |
| opacity | `Number` |`N`| `0.6` | opacity `0-1` |
+| left | `Number` |`N`| `0` | move left distance |
| has-animation | `Boolean` |`N`| `true` | whether to animate |
| can-auto-close | `Boolean` |`N`| `true` | whether to can auto close |
| duration | `Number` | `300` |`N`| animation duration time |
diff --git a/packages/wxc-overlay/README_cn.md b/packages/wxc-overlay/README_cn.md
index 70bbb09..bdc2874 100644
--- a/packages/wxc-overlay/README_cn.md
+++ b/packages/wxc-overlay/README_cn.md
@@ -48,6 +48,7 @@
| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|
| show | `Boolean` |`Y`| `false` | 是否开启 |
+| left | `Number` |`N`| `0` | 向左移动距离 |
| opacity | `Number` |`N`| `0.6` | 蒙层opacity度数0-1 |
| has-animation | `Boolean` |`N`| `true` | 是否开启蒙层出现动画 |
| can-auto-close | `Boolean` |`N`| `true` | 是否可以点击自动关闭 |
diff --git a/packages/wxc-overlay/index.vue b/packages/wxc-overlay/index.vue
index e01f827..60659a0 100644
--- a/packages/wxc-overlay/index.vue
+++ b/packages/wxc-overlay/index.vue
@@ -18,7 +18,6 @@
.wxc-overlay {
width: 750px;
position: fixed;
- left: 0;
top: 0;
bottom: 0;
right: 0;
@@ -27,12 +26,18 @@
<script>
const animation = weex.requireModule('animation');
+ import Utils from '../utils';
+
export default {
props: {
show: {
type: Boolean,
default: true
},
+ left: {
+ default: Number,
+ default: 0
+ },
hasAnimation: {
type: Boolean,
default: true
@@ -58,7 +63,8 @@
overlayStyle () {
return {
opacity: this.hasAnimation ? 0 : 1,
- backgroundColor: `rgba(0, 0, 0,${this.opacity})`
+ backgroundColor: `rgba(0, 0, 0,${this.opacity})`,
+ left: Utils.env.isWeb() ? this.left + 'px' : 0
}
},
shouldShow () {
diff --git a/packages/wxc-swipe-action/README.md b/packages/wxc-swipe-action/README.md
new file mode 100644
index 0000000..84f2d0c
--- /dev/null
+++ b/packages/wxc-swipe-action/README.md
@@ -0,0 +1,125 @@
+# wxc-swipe-action
+
+!> These rich interaction components are based on [BindingX](https://alibaba.github.io/bindingx/) feature. Make sure your app [install it](https://github.com/alibaba/bindingx#installation).
+
+### Rule
+- Only one row can be swiped at a time
+- Hide operations by clicking on the right button or by clicking on the list.
+
+## [Demo]
+<img src="http://cdn.emas-poc.com/material/weex/82xh6-9dnxz2.gif" width="240"/>
+
+## Code Example
+```vue
+<template>
+<div>
+ <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+ components: {
+ WxcSwipeAction
+ },
+ data() {
+ return {
+ data: [
+ {
+ title: "标题1",
+ right: [
+ {
+ text: "置顶",
+ onPress: function() {
+ modal.toast({
+ message: "置顶",
+ duration: 0.3
+ });
+ }
+ },
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题2",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题3",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ }
+ ]
+ };
+ },
+
+ methods: {
+ onTest(node, i) {
+ modal.toast({
+ message: node.title,
+ duration: 0.3
+ });
+ }
+ }
+};
+</script>
+```
+
+### API
+|Prop|Type|Required|Default|Description|
+|-------------|------------|--------|-----|-----|
+|data|Array|Y|[]|list|
+
+### Data API
+|Prop|Description|Type|Default|
+|-------------|------------|--------|-----|
+|title|content|String|null|
+|right|Right button group|Array|null|
+|autoClose|Hide the button automatically after clicking the button|Boolean|false|
+
+### Button
+|Prop|Type|Description|
+|-------------|------------|--------|
+|text|String|copywriting|
+|style|Object|button style|
+|onPress|():void|click|
+
+### Event
+
+```
+// click
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-swipe-action/README_cn.md b/packages/wxc-swipe-action/README_cn.md
new file mode 100644
index 0000000..8b0019e
--- /dev/null
+++ b/packages/wxc-swipe-action/README_cn.md
@@ -0,0 +1,125 @@
+# wxc-swipe-action
+
+!> 这个富交互体验组件依赖于 [BindingX](https://alibaba.github.io/bindingx/) 特性，使用前请确定你的App [是否安装](https://github.com/alibaba/bindingx#installation)
+
+### 规则
+- 一次只可滑动一行列表
+- 点击右边按钮或点击列表可隐藏操作。
+
+## [Demo]
+<img src="http://cdn.emas-poc.com/material/weex/82xh6-9dnxz2.gif" width="240"/>
+
+## 使用方法
+```vue
+<template>
+<div>
+ <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+ components: {
+ WxcSwipeAction
+ },
+ data() {
+ return {
+ data: [
+ {
+ title: "标题1",
+ right: [
+ {
+ text: "置顶",
+ onPress: function() {
+ modal.toast({
+ message: "置顶",
+ duration: 0.3
+ });
+ }
+ },
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题2",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题3",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ }
+ ]
+ };
+ },
+
+ methods: {
+ onTest(node, i) {
+ modal.toast({
+ message: node.title,
+ duration: 0.3
+ });
+ }
+ }
+};
+</script>
+```
+
+### 可配置参数
+|参数|类型|是否要引入|默认值|描述|
+|-------------|------------|--------|-----|-----|
+|data|Array|Y|[]|列表数据|
+
+### Data API
+|属性|说明|类型|默认值|
+|-------------|------------|--------|-----|
+|title|标题|String|null|
+|right|右侧按钮组|Array|null|
+|autoClose|点击按钮后自动隐藏按钮|Boolean|false|
+
+### Button
+|参数|类型|描述|
+|-------------|------------|--------|
+|text|String|文案|
+|style|Object|按钮样式|
+|onPress|():void|单击事件|
+
+### 事件回调
+
+```
+// 单击列表
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-swipe-action/index.js b/packages/wxc-swipe-action/index.js
new file mode 100644
index 0000000..14bcbde
--- /dev/null
+++ b/packages/wxc-swipe-action/index.js
@@ -0,0 +1 @@
+export { default } from './index.vue';
diff --git a/packages/wxc-swipe-action/index.vue b/packages/wxc-swipe-action/index.vue
new file mode 100644
index 0000000..ea4a4de
--- /dev/null
+++ b/packages/wxc-swipe-action/index.vue
@@ -0,0 +1,174 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
+<template>
+<div class="container">
+ <div ref="skid" v-for="(item, i) of data" @click="onNodeClick(item, i)" :key="'skid-' + i" class="wxc-skid" :style="{width: (750 + item.right.length * 100) + 'px'}" @touchstart="(e) => !isAndroid && onPanStart(e, item, i)" @horizontalpan="(e) => isAndroid && onPanStart(e, item, i)" @touchend="(e) => onPanEnd(e, item, i)">
+ <text :class="['box-center', 'border', 'text', i + 1 === data.length && 'box-center-last']">{{item.title}}</text>
+ <div class="box-right">
+ <text class="child text" @click="onRightNode(item, child, i)" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
+ </div>
+ </div>
+</div>
+</template>
+
+<style>
+.container {
+ background-color: #ddd;
+ border-top-width: 1px;
+ border-top-color: #ddd;
+}
+.border {
+ border-bottom-width: 1px;
+ border-bottom-color: #ddd;
+}
+.wxc-skid {
+ flex-direction: row;
+ height: 90px;
+ background-color: white;
+}
+.box-right {
+ flex-direction: row;
+ align-items: center;
+ line-height: 90px;
+}
+.box-center {
+ width: 735px;
+ line-height: 90px;
+ background-color: white;
+ margin-left: 15px !important;
+ margin-left: 15px;
+}
+.box-center-last {
+ width: 750px;
+ margin-left: 0 !important;
+ padding-left: 15px !important;
+ margin-left: 0;
+ padding-left: 15px;
+}
+
+.child {
+ width: 100px;
+ text-align: center;
+ color: white;
+ background-color: #ddd;
+ line-height: 90px;
+}
+.text {
+ font-size: 30px;
+}
+</style>
+
+<script>
+import Binding from "weex-bindingx/lib/index.weex.js";
+const animation = weex.requireModule("animation");
+import Utils from "../utils";
+
+export default {
+ props: {
+ data: {
+ type: Array,
+ default: []
+ }
+ },
+ data() {
+ return {
+ mobileX: 0,
+ webStarX: 0,
+ saveIdx: null,
+ isAndroid: Utils.env.isAndroid()
+ };
+ },
+ methods: {
+ special(dom, styles) {
+ animation.transition(dom, {
+ styles,
+ duration: 200, //ms
+ timingFunction: "ease",
+ delay: 100 //ms
+ });
+ },
+ onRightNode(pNode, node, i) {
+ node.onPress();
+ if (pNode.autoClose)
+ this.special(this.$refs.skid[i], {
+ transform: `translate(0, 0)`
+ });
+ },
+ onNodeClick(node, i) {
+ if (this.mobileX < 0) {
+ this.mobileX = 0;
+ this.special(this.$refs.skid[this.saveIdx], {
+ transform: `translate(0, 0)`
+ });
+ this.isAndroid &&
+ this.special(this.$refs.skid[i], {
+ transform: `translate(0, 0)`
+ });
+ } else {
+ this.$emit("onNodeClick", node, i);
+ }
+ },
+
+ onPanEnd(e, node, i) {
+ if (Utils.env.isWeb()) {
+ const webEndX = e.changedTouches[0].pageX;
+ this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i]);
+ }
+ },
+ onPanStart: function(e, node, i) {
+ const { saveIdx } = this;
+ if (saveIdx !== i && saveIdx !== null) {
+ this.special(this.$refs.skid[saveIdx], {
+ transform: `translate(0, 0)`
+ });
+ this.mobileX = 0;
+ }
+ this.saveIdx = i;
+ !Utils.env.isWeb() ? this.mobile(e, node, i) : this.web(e, node, i);
+ e.stopPropagation();
+ },
+ web(e, node, i) {
+ this.webStarX = e.changedTouches[0].pageX;
+ },
+ mobile(e, node, i) {
+ var el = this.$refs["skid"][i];
+ Binding.bind(
+ {
+ anchor: el.ref,
+ eventType: "pan",
+ props: [
+ {
+ element: el.ref,
+ property: "transform.translateX",
+ expression: `x+${this.isAndroid ? 0 : this.mobileX}`
+ }
+ ]
+ },
+ e => {
+ const { state, deltaX } = e;
+ if (state === "end") {
+ this.mobileX += deltaX;
+ this.movingDistance(this.mobileX, node, el);
+ }
+ }
+ );
+ },
+ movingDistance(scope, node, el) {
+ const len = node.right ? node.right.length : 0;
+ const distance = len * -100;
+ if (scope < -30) {
+ this.special(el, {
+ transform: `translate(${distance}px, 0)`
+ });
+ this.mobileX = distance;
+ } else {
+ this.special(el, {
+ transform: `translate(0, 0)`
+ });
+ this.mobileX = 0;
+ }
+ }
+ }
+};
+</script>
diff --git a/packages/wxc-swipe-action/package.json b/packages/wxc-swipe-action/package.json
new file mode 100644
index 0000000..6e22ed1
--- /dev/null
+++ b/packages/wxc-swipe-action/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "wxc-simple-flow",
+ "version": "0.1.0",
+ "description": "Weex侧滑列表",
+ "main": "index.js",
+ "type": "weex",
+ "repository": "https://github.com/alibaba/weex-ui/tree/master/packages/wxc-simple-flow",
+ "keywords": [
+ "Weex",
+ "Vue",
+ "WeexComponent",
+ "DataDisplay",
+ "SimpleFlow",
+ "WeexUi"
+ ],
+ "weex": {
+ "plugins": {},
+ "market": {
+ "thumbnail": "https://img.alicdn.com/tfs/TB12jLwSpXXXXcVaXXXXXXXXXXX-750-1334.png"
+ }
+ },
+ "author": "wjun94",
+ "license": "MIT",
+ "dependencies": {
+ }
+}
