From cb6dfd0c0b1d4dacbfc1c9907618fe03d753b028 Mon Sep 17 00:00:00 2001 From: Dcloud_UNI_yuhe Date: Mon, 30 Sep 2024 16:52:26 +0800 Subject: [PATCH] Update uni-swipe-action.md --- docs/component/uniui/uni-swipe-action.md | 1104 +++++++++++----------- 1 file changed, 553 insertions(+), 551 deletions(-) diff --git a/docs/component/uniui/uni-swipe-action.md b/docs/component/uniui/uni-swipe-action.md index c0d85d4d8..564dd64b7 100644 --- a/docs/component/uniui/uni-swipe-action.md +++ b/docs/component/uniui/uni-swipe-action.md @@ -1,551 +1,553 @@ - -::: tip 组件名：uni-swipe-action -> 代码块： `uSwipeAction`、`uSwipeActionItem` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action) -::: - -通过滑动触发选项的容器 - -## 介绍 -::: warning 注意事项 -> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 -- swipeAction的跟手联动是非常考验性能的。为了提高交互体验，本组件在 app 端 vue 页面、h5、微信小程序使用了wxs 技术，nvue 页面使用 bindingx 技术，可以达到流畅的体验。在其他小程序平台由于底层不支持优化技术，只能使用使用普通 js ，此时性能一般。 -- `uni-swipe-action` 和 `uni-swipe-action-item` 需要同时使用 -- `uni-swipe-action` 不能嵌套在 `swiper` 中使用 -- 长列表不建议使用 autoClose属性，会影响组件性能，造成卡顿，原因是打开之后要通知其他已经打开的组件关闭，会导致多个组件重新渲染 -- 事件中传入 `$event` 获取额外参数 -- 向下兼容，需要将 `options` 属性替换成 `right-options` -::: -### 基本用法 - -```html - - - - SwipeAction 基础使用场景 - - - - - - 使用插槽 - - - - - - - 混合使用 - - - - - - - SwipeAction 基础使用场景 - - - - - - - item1 - - - item2 - - - item3 - - - -``` - -```javascript -export default { - data(){ - return { - options:[ - { - text: '取消', - style: { - backgroundColor: '#007aff' - } - }, { - text: '确认', - style: { - backgroundColor: '#dd524d' - } - } - ] - } - }, - methods:{ - onClick(e){ - console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮') - }, - swipeChange(e,index){ - console.log('当前状态：'+ e +'，下标：' + index) - } - } -} - -``` - -## API - -### SwipeAction Methods - -方法通过 ref 调用 - -|方法称名 |说明| -|:-:|:-:| -|resize()|动态添加数据后，如不能正常滑动，需要主动调用此方法，微信小程序、h5、app-vue 不生效| -|closeAll()|关闭所有已经打开的组件| - -### SwipeAcitonItem Props - -|属性名|类型|可选值|默认值|是否必填|说明| -|:-:|:-:|:-:|:-:|:-:|:-:| -|show|String|left/right/none|none |否|开启关闭组件，auto-close = false 时生效| -|threshold|Number|-|20|否|滑动阈值| -|disabled|Boolean|-|false|否|是否禁止滑动| -|autoClose|Boolean|-|true|否|其他组件开启的时候，当前组件是否自动关闭，**注意：长列表使用会有性能问题**| -|left-options|Array/Object |-|-|否|左侧选项内容及样式| -|right-options|Array/Object |-|-|否|右侧选项内容及样式| - -#### LeftOptions & RightOptions Options - -|参数|类型|是否必填 |说明| -|:-:|:-:|:-:|:-:| -|text|String|是|按钮的文字 | -|style|Object|否|按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：14px | - - - -### SwipeAcitonItem Events - -|事件称名 |说明|返回值| -|:-:|:-:|:-:| -|@click|点击选项按钮时触发事件|e = {content,index} ，content（点击内容）、index（下标）、position (位置信息) | -|@change|组件打开或关闭时触发|left:左侧 ，right：右侧，none：关闭| - -### SwipeAcitonItem Slots - -|名称|说明| -|:-:|:-:| -|-|默认插槽自定义显示内容| -|default|默认内容插槽| -|left|左侧滑动内容 ，会覆盖 leftOptions 内容| -|right|右侧滑动内容 ，会覆盖 rightOptions 内容| - -::: warning 提示 -- iOS 端由于存在bounce效果，滑动体验略差，建议禁止bounce效果，禁止方式如下： -```javascript -{ - "path": "swipe-action/swipe-action", - "style": { - "navigationBarTitleText": "SwipeAction 滑动操作", - "disableScroll":true, - "app-plus":{ - "bounce":"none" - } - } -} -``` -::: - - -### Q&A -** Q：动态加载数据，组件滑动失效是怎么回事** -- A：是因为组件会在加载的时候获取相应的节点信息数据 ，获取需要滑动的距离，所以有时候动态加载数据之后，可能是时机的问题，导致节点信息获取失败 ，那么组件就不能正常滑动。 -- A：如果是在其他页面通过 vuex 或者uni.$emit 等手段来更新其他页面 uni-swipe-action 数据 ，同样会发生不能滑动的现象，原因是页面隐藏后是不能获取到页面信息的，所以回到 uni-swipe-action 页面后，新增的组件节点信息获取肯定是错误的，所以不能滑动。 -- A：值的高兴的是在 1.2.2 版本中重构了组件滑动逻辑 ，在微信小程序、h5、app-vue 中使用了 wxs 优化滑动性能，并且不需要担心动态新增组件导致组件无法滑动的问题，节点信息在滑动时实时获取。 -- A：因为其他平台无法使用 wxs ，所以还是会出现无法滑动的问题怎么处理？1.2.2 版本提供了 resize() 方法，无法滑动时调用 resize() 方法重新渲染组件即可，调用方法时要保证节点已经渲染完毕。 - -** Q：运行到 nvue 下没有样式** -- A：因为 nvue 下样式默认不能使用复杂的css选择器，所以需要在 manifest.json 中配置 "nvueStyleCompiler" 属性 - ```json - // manifest.json - { - "nvueStyleCompiler" : "uni-app", - } - ``` - - -## 示例 -::: warning 注意 -示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 -::: - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action -> Template -``` html - -``` -> Script -```html - -``` -> Style -```html - - -``` -::: - -[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action) +::: tip 组件名：uni-swipe-action +> 代码块： `uSwipeAction`、`uSwipeActionItem` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action) +::: + +通过滑动触发选项的容器 + +## 介绍 +::: warning 注意事项 +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +- swipeAction的跟手联动是非常考验性能的。为了提高交互体验，本组件在 app 端 vue 页面、h5、微信小程序使用了wxs 技术，nvue 页面使用 bindingx 技术，可以达到流畅的体验。在其他小程序平台由于底层不支持优化技术，只能使用使用普通 js ，此时性能一般。 +- `uni-swipe-action` 和 `uni-swipe-action-item` 需要同时使用 +- `uni-swipe-action` 不能嵌套在 `swiper` 中使用 +- 长列表不建议使用 autoClose属性，会影响组件性能，造成卡顿，原因是打开之后要通知其他已经打开的组件关闭，会导致多个组件重新渲染 +- 事件中传入 `$event` 获取额外参数 +- 向下兼容，需要将 `options` 属性替换成 `right-options` +::: +### 基本用法 + +```html + + + + SwipeAction 基础使用场景 + + + + + + 使用插槽 + + + + + + + 混合使用 + + + + + + + SwipeAction 基础使用场景 + + + + + + + item1 + + + item2 + + + item3 + + + + +``` + +```javascript +export default { + data() { + return { + options: [{ + text: '取消', + style: { + backgroundColor: '#007aff' + } + }, { + text: '确认', + style: { + backgroundColor: '#dd524d' + } + }] + } + }, + methods: { + onClick(e) { + console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮') + }, + change(event) { + console.log('改变事件', event); + }, + swipeChange(e, index) { + console.log('当前状态：' + e + '，下标：' + index) + } + } +} + + +``` + +## API + +### SwipeAction Methods + +方法通过 ref 调用 + +|方法称名 |说明| +|:-:|:-:| +|resize()|动态添加数据后，如不能正常滑动，需要主动调用此方法，微信小程序、h5、app-vue 不生效| +|closeAll()|关闭所有已经打开的组件| + +### SwipeAcitonItem Props + +|属性名|类型|可选值|默认值|是否必填|说明| +|:-:|:-:|:-:|:-:|:-:|:-:| +|show|String|left/right/none|none |否|开启关闭组件，auto-close = false 时生效| +|threshold|Number|-|20|否|滑动阈值| +|disabled|Boolean|-|false|否|是否禁止滑动| +|autoClose|Boolean|-|true|否|其他组件开启的时候，当前组件是否自动关闭，**注意：长列表使用会有性能问题**| +|left-options|Array/Object |-|-|否|左侧选项内容及样式| +|right-options|Array/Object |-|-|否|右侧选项内容及样式| + +#### LeftOptions & RightOptions Options + +|参数|类型|是否必填 |说明| +|:-:|:-:|:-:|:-:| +|text|String|是|按钮的文字 | +|style|Object|否|按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：14px | + + + +### SwipeAcitonItem Events + +|事件称名 |说明|返回值| +|:-:|:-:|:-:| +|@click|点击选项按钮时触发事件|e = {content,index} ，content（点击内容）、index（下标）、position (位置信息) | +|@change|组件打开或关闭时触发|left:左侧 ，right：右侧，none：关闭| + +### SwipeAcitonItem Slots + +|名称|说明| +|:-:|:-:| +|-|默认插槽自定义显示内容| +|default|默认内容插槽| +|left|左侧滑动内容 ，会覆盖 leftOptions 内容| +|right|右侧滑动内容 ，会覆盖 rightOptions 内容| + +::: warning 提示 +- iOS 端由于存在bounce效果，滑动体验略差，建议禁止bounce效果，禁止方式如下： +```javascript +{ + "path": "swipe-action/swipe-action", + "style": { + "navigationBarTitleText": "SwipeAction 滑动操作", + "disableScroll":true, + "app-plus":{ + "bounce":"none" + } + } +} +``` +::: + + +### Q&A +** Q：动态加载数据，组件滑动失效是怎么回事** +- A：是因为组件会在加载的时候获取相应的节点信息数据 ，获取需要滑动的距离，所以有时候动态加载数据之后，可能是时机的问题，导致节点信息获取失败 ，那么组件就不能正常滑动。 +- A：如果是在其他页面通过 vuex 或者uni.$emit 等手段来更新其他页面 uni-swipe-action 数据 ，同样会发生不能滑动的现象，原因是页面隐藏后是不能获取到页面信息的，所以回到 uni-swipe-action 页面后，新增的组件节点信息获取肯定是错误的，所以不能滑动。 +- A：值的高兴的是在 1.2.2 版本中重构了组件滑动逻辑 ，在微信小程序、h5、app-vue 中使用了 wxs 优化滑动性能，并且不需要担心动态新增组件导致组件无法滑动的问题，节点信息在滑动时实时获取。 +- A：因为其他平台无法使用 wxs ，所以还是会出现无法滑动的问题怎么处理？1.2.2 版本提供了 resize() 方法，无法滑动时调用 resize() 方法重新渲染组件即可，调用方法时要保证节点已经渲染完毕。 + +** Q：运行到 nvue 下没有样式** +- A：因为 nvue 下样式默认不能使用复杂的css选择器，所以需要在 manifest.json 中配置 "nvueStyleCompiler" 属性 + ```json + // manifest.json + { + "nvueStyleCompiler" : "uni-app", + } + ``` + + +## 示例 +::: warning 注意 +示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 + +请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 +::: + +::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action +> Template +``` html + +``` +> Script +```html + +``` +> Style +```html + + +``` +::: + +[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action) -- GitLab