墨刀实现区域内滚动效果

最新推荐文章于 2024-08-21 11:43:52 发布
最新推荐文章于 2024-08-21 11:43:52 发布
阅读量1.1w 收藏 1
点赞数
分类专栏： 工具效率 产品 文章标签： 墨刀
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bengofrank/article/details/123097055
版权

如题，使用墨刀在页面的规定区域内实现内部滚动的效果。

知识点：动态组件

1、通过组件创建展示的全内容

 

2、选中组件添加动态组件

点击添加组件状态，软件自动复制组件内容产生状态2。退出动态组件即可。

3、动态组件编辑

通过拖拉组件或指定组件W、H值，修改动态组件展示尺寸。

将动态组件的属性-滚动条，修改为自动显示。

 4、演示

 

Axure、墨刀制作轮播图
zxy1234a的博客
06-24 869
1. 点击绿色标题栏状态名称，可打开状态列表2. 鼠标移入某一个状态，会出现复制和删除图标，点击可复制或删除该状态3. 点击状态列表下方按钮，可新增空白状态4. 点击绿色标题栏右侧关闭按钮，可关闭动态面板编辑界面5、我们点击“复制状态”图标，复制出三个状态，分别放置三张图片。6、点击状态名称，可修改该状态名称。教学中我们不作修改，沿用默认名称。7、我们接下来需要替换状态2与状态3的图片。点击State2，切换至状态28、替换图片。注意横坐标与纵坐标需与状态1中的图片保持一致。
《前端框架开发技术》HTML+CSS+JavaScript 制作个人简历模板
专注于dreamweaver网页设计制作
08-19 952
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
墨刀设计局部滚动
Fa_lajun21的博客
10-23 2582
局部滚动功能一般会用于app的tab栏设置，日常生活很常见，这篇文章主要介绍用墨刀工具实现该功能的方法
墨刀实现滚动效果
jakelihua
11-01 4312
墨刀实现滚动效果
墨刀实现局部滚动条
热门推荐
xdh19940602的博客
10-27 1万+
1、场景1: 制作pc端产品时，实现局部滚动条效果，以数据列表为例 方法：使用墨刀的“动态组件”，编辑组件状态，将列表的内容填充超过未编辑时组件的大小 未编辑前，“动态组件”状态： 点击“动态组件”编辑时，内部状态： 1）注意编辑状态时，需要把内部状态的虚线拉到想展示数据的边界，即虚线要框上所有要展示的数据 2）编辑组件状态时，一般会默认两个组件状态，需要注意，当我们不需要其他组件状态时，仍然不能删除该组件的第二个状态，否则交互无效，如下图所示：（状态2我这里是复制了状态...
墨刀_滚动和长屏/事件&跳转到指定页面的指定状态
xuchaoxin1375的博客
03-17 4365
文章目录reference操作预览效果 reference 墨刀帮助中心 - 墨刀使用技巧及常见问题解答 - 固定组件 (modao.cc) 操作 将蓝色箭头上拉 这样导航栏部件就会固定在页面下方 拉长设计页面:鼠标移动到页面底部稍稍靠近页面底部 拉动的过程中,页面长度会动态变化 注意,该长度并不会改变预览时的手机长度,而是以滚动的形式体现该长度 预览效果 ......
墨刀原型-实现轮播图功能
niuniu_666的博客
01-16 1932
墨刀原型实现轮播图功能
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9639
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
axure手机页面设计说明_使用Axure打造最佳的移动端交互原型教程
weixin_39873177的博客
12-21 1236
一直以来Axure在对移动端原型设计方面的支持都不是十分理想，它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件，但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法，我们同样可以通过Axure制作出非常完美的移动端演示原型。首先你可以通过手机或电脑访问以下地址，这是我设计完成的移动端原型模板。1. 选择适...
axure手机页面设计说明_Axure中移动端原型设计方法
weixin_33277412的博客
01-13 2766
在使用Axure设计移动端原型的应用方面，我总结出了两种常用的方法。第一种是更适合在移动端进行演示的设计方法，大家可以参考我之前已经分享过的一篇教程：使用Axure打造最佳的移动端交互原型教程，使用这种方法输出的原型在手机设备上进行演示时可以达到跟真实APP几乎一致的展示效果及交互体验。在今天我将分享另外一种基于设备模板的移动端原型设计方法。什么是基于设备模板的移动端原型设计方法？简而言之就是在A...
简洁方便的弹出窗口效果(支持滚动条、左右切换
06-10
由于网友需要，今天特将一个弹窗窗口特效整理出来给大家使用。包括：弹出窗口特效、自定义滚动条，左右焦点图切换多种效果。 效果：点击图片后弹出一个窗口，大小固定死，始终处于网页中间位置，多出部分可自定义滚动条样式，支持关闭以及左右切换，效果较为简单，但很实用。 使用方法： 1、在head中调用CSS样式 2、调用jquery.min.js（jquery库） 3、调用tinyscrollbar.js（自定义导航插件）以及JS样式 4、由于默认每个循环宽度为900像素，懒人们在修改CSS的同时记得修改对应的JS控制的大小 5、调用自定义导航条插件的JS一定要在弹出窗口后调用，否则可能导致滚动条失效，即：$('#scrollbar').tinyscrollbar();在弹出窗口后调用
横向滚动元素经典实现
cqstart116的专栏
12-10 1031
.mobile-scroll-row{ white-space:nowrap; overflow-y:hidden; overflow-x:auto; padding: 0px 10px 200px 10px; -webkit-overflow-scrolling:touch; /* width:100%; */ } .mobile-s
墨刀使用--页面导航条功能实现交互
niuniu_666的博客
01-09 2944
墨刀使用--页面导航栏功能实现交互
墨刀原型--多tab切换显示对应页面场景交互步骤
niuniu_666的博客
06-28 3535
实现点击tab或状态选项，切换至对应的页面，实现正常交互
墨刀基础篇(一) ：6.常用组件(动态组件)
最新发布
人不风流枉少年
08-21 1378
橘色框表示动态组件内容的大小（可视区域），可以拖动状态1上的小闪电指向状态2，通过拖动状态2上的小闪电指向状态1，这样就是单击状态1跳转到状态2，单击状态2跳转到状态1。
墨刀_移动端_实现导航条平移功能
言午先生的驿站
03-22 9435
墨刀做移动端原型确实比AXURE轻巧很多，现在实现一个在移动端导航条平移的功能。 步骤1：在左边工具栏选择母版，然后点击新建，并输入新建的母版名。 步骤2：在母版中放入导航条所需的文字或图标，不够宽度可拖动母版边框，以便边框将导航条的内容覆盖在内。 步骤3：保存母版，并返回工作区。 步骤4：将母...
表格内部添加滚动条（表头不动，表体动）
qq_43173759的博客
10-28 2036
1、表格给的是固定高度（模态框），当超过这个高度时滚动条就开始滚动； 2、表头宽度为（100%-滚动条宽度）时，表头和表体的总宽度才会相等，表体和表头的列宽一一对应（table-layout:fixed; 让所有列平均分配总宽） 3、此时表头若加了width，表体相应的那一列也应该给相同的宽度，（表体的宽不再随着表头的宽动） 3、当设置表头宽度为（100% - 1em）时，就会空出一块，这一小块...
第二次原型分享——墨刀之弹窗and左右滑动效果
qq_42935600的博客
11-06 1万+
墨刀强大的现成原件以及便捷的分享功能，毫不犹豫就开了会员。 以前总觉得Axure好用，说墨刀**，现在用了之后，真香！ 今天带给带大家使用墨刀制作弹窗，并实现弹窗关闭。 1.进入编辑界面后，自己制作一个组件。先在我的组件中新建组件，可以直接拉取矩形为组件主体，当然，也可以插入图片，使之更好看，但这里为了方便演示，就不在此赘述。 之后，在矩形组件上添加一个按钮，此部分为基础，不再说明，之后，点击右上...
vue如何实现和墨刀拖拽一样的效果
05-12
墨刀的拖拽效果是基于HTML5的Drag and Drop API实现的，而Vue可以通过自定义指令来实现类似的效果。 实现步骤： 1. 在需要拖拽的元素上绑定一个自定义指令，比如“v-draggable”。 2. 在指令的bind钩子中，绑定拖拽事件，将元素设置为可拖拽的。 3. 在指令的update钩子中，更新元素的位置信息。 4. 在指令的unbind钩子中，解除拖拽事件的绑定。 下面是一个简单的实现示例： ```html <template> <div v-draggable> 拖拽我 </div> </template> <script> export default { directives: { draggable: { bind(el) { el.draggable = true; el.addEventListener('dragstart', this.handleDragStart); el.addEventListener('dragend', this.handleDragEnd); }, update(el, binding) { el.style.transform = `translate(${binding.value.x}px, ${binding.value.y}px)`; }, unbind(el) { el.removeEventListener('dragstart', this.handleDragStart); el.removeEventListener('dragend', this.handleDragEnd); }, handleDragStart(event) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', null); }, handleDragEnd(event) { event.preventDefault(); event.stopPropagation(); }, }, }, }; </script> ``` 上面的代码实现了一个可拖拽的div元素，可以通过绑定x和y属性来控制元素的位置。通过监听元素的dragstart和dragend事件，实现了拖拽操作，并在拖拽结束后更新元素的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿信AI实验室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值