Axure 列表左右滑动交互-删除、置顶

简介: Axure 列表左右滑动交互-删除、置顶

Axure 列表左右滑动交互

  • 左滑:删除、标记
  • 右滑:置顶、回复

拖一个动态面板,命名为【滑动面板】,添加三个状态,并分别命名为:正常状态、向左状态、向右状态

添加元件

正常状态

向左状态

  1. 将【正常状态】里的元件复制到 【向左状态】 中,并进行组合,方便调整
  2. 并将组合元件向左移动,右边留出两个按钮空间
  3. 在组合元件右侧添加两个按钮,分别为:【标为已读】、【删除】

向右状态

将【向左状态】的组合复制到【向右状态】中,参考上面方法,添加的元件,并增加【置顶】、【回复】两矩形

交互事件

给动态面版添加两个交互【向左拖动】、【向右拖动】

向左拖动分两种情况

  • 正常状态,需要向左滑动,对该条数据进行删除等
  • 已经被滑到右边了,需要向左滑动到正常状态。

向右拖动分两种情况:

  • 正常状态,需要向右滑动,进行回复、置顶
  • 已经被滑到左边了,需要向右滑动,恢复正常状态。

详细事件如下:

目录
相关文章
|
4月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
80 1
|
4月前
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
57 0
|
6月前
|
Shell 开发工具 git
聊天功能演示系统发布后出现有些页面滚动与鼠标点击问题解决
聊天功能演示系统发布后出现有些页面滚动与鼠标点击问题解决
41 0
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
164 0
微信小程序分类菜单激活状态跟随列表滚动自动切换
|
JSON 小程序 JavaScript
小程序地图插入图标后 怎么实现点击图标弹出窗口
小程序地图插入图标后 怎么实现点击图标弹出窗口
97 0
|
程序员 Android开发 UED
玩安卓从 0 到 1 之列表一键置顶
玩安卓从 0 到 1 之列表一键置顶
225 0
玩安卓从 0 到 1 之列表一键置顶
|
小程序
【笔记】微信小程序右上角胶囊按钮(标题设置透明后的处理)
微信小程序右上角胶囊按钮(标题设置透明后的处理)
1965 0
【笔记】微信小程序右上角胶囊按钮(标题设置透明后的处理)
|
测试技术
clswindow使用案例:窗口图钉-窗口置顶(含源码)
clswindow使用案例:窗口图钉-窗口置顶(含源码)
256 0
clswindow使用案例:窗口图钉-窗口置顶(含源码)
|
Android开发 容器
仿QQ对话列表滑动删除与置顶的原理及实现(一)
仿QQ对话列表滑动删除与置顶的原理及实现(一)
138 0
仿QQ对话列表滑动删除与置顶的原理及实现(一)
仿QQ对话列表滑动删除与置顶的原理及实现(二)
仿QQ对话列表滑动删除与置顶的原理及实现(二)
100 0
仿QQ对话列表滑动删除与置顶的原理及实现(二)