利用fairygui界面滚动组件实现滑动屏幕

最新推荐文章于 2024-05-28 09:57:13 发布
最新推荐文章于 2024-05-28 09:57:13 发布
阅读量5.3k 收藏
点赞数
文章标签： fairygui 界面滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38704727/article/details/83584846
版权

我在做一个小游戏的时候需要实现界面滑动效果，开始第一念头是用监听鼠标的滑动位置改变来做，但是fairygui有一种滚动组件就可以很方便的实现。

我们需要用到滑动界面情况，通常是因为游戏的背景图片比游戏可视界面大（暂不考虑背景循环）

图片加载：首先我们创建一个组件A，大小根据游戏需求而定（通常是手机界面大小），然后如果需要的背景是一张大图片的话直接把图片放入组件A中，如果图片太大fairygui导不出来我们可以把一张大图片切成若干张小图片，我们需要在组件A中再创建一个组件B作为容器，该容器长或宽宽要等于这张大图的长宽，依次将图片加入或者用代码动态加入到组件B中。

组件设置：如果你想左右滑动背景就将组件A设置为水平滚动，想上下滚动屏幕则将组件A设置为垂直滚动这样就实现了想要的背景滚动功能

最后你还可以对滑动进行一些设置

 

Kang.Charles
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先，禁止屏幕滚动的基本思路是通过监听并阻止触摸移动事件（`touchmove`）和鼠标滚轮事件（`mousewheel`）的默认行为。在Vue中，我们可以直接在...
FairyGUI条子家族（滚动条，滑动条，进度条）
青哥
05-20 1161
条子家族（滚动条，滑动条，进度条） 1、进度条 进度条资源 操作步骤 2、滑动条 滑动条资源 操作步骤 3、滚动条 滚动条资源 （1）向上按钮 （2）向下按钮 （3）滚动条背景 （4）把手按钮 操作步骤 4、列表与滚动条的组合使用案例 发现滚动条中间的把手按钮被拉长了，不好看，我们作如下处理： 至此，全部完成。 ...
FairyGUI进阶-滑动列表 虚拟列表 循环列表
xiongwen_li的博客
09-15 1054
Fairy滑动列表 虚拟列表 循环列表使用
【Unity之FGUI】白仙章Fairy GUI控件详解二
最新发布
秩沅
05-28 1544
👨‍💻⭐🅰️推荐专栏⭐⭐-[⭐。
Fairy GUI 使用
weixin_44806700的博客
04-24 1912
官网：https://www.fairygui.com/ 基本操作 添加包：UIPackage.AddPackage(@“Assets/ArtContents\UIAssets\Sprites\homeChatBox\homeChatBox”); 创建对象： var main = UIPackage.CreateObject(“homeChatBox”, “main”); 显示： GRoot.inst.AddChild(main); 元件（GObject） 设置隐藏和显示 visible = true/f
FairyGUI学习使用
m0_52155091的博客
02-19 2235
#FairyGUI的创建 编辑好项目名称后，选定项目存储位置，最后选定项目类型点击创建即可 #FairyGUI主界面展示
FairyGUI-GSlider滑动条
成长ing中的w的专栏
05-08 854
滑动条一般用于设置面板中，如音量大小、操作灵敏度设置等。 导出资源 代码实现 using System.Collections; using System.Collections.Generic; using UnityEngine; using FairyGUI; /* * Author:W * 滑动组件使用:音量设置，操作精度设置等 */ public class GSliderTest : MonoBehaviour { private GComponent root; pr
qt实现QStackedWidget界面左右滑动示例
02-24
通过重写QStackedWidget类,来实现模拟手机home界面的左右滑动效果. 支持快滑,慢滑（如果是慢滑,则根据当前滑到的界面处于哪一页占比更多,则就跳到哪里.），同时支持边缘滑动检测（已在最边缘时,则滑动速率减慢,告诉...
基于vue实现探探滑动组件功能
10-15
要实现以上功能，我们可以利用Vue的一些特性来构建一个自定义的滑动组件。首先，通过父层组件使用`perspective`和`perspective-origin`属性来给子元素提供透视效果，然后利用`translate3d`来模拟堆叠效果。在Vue组件...
auto.js自动滑动屏幕
07-02
自动滑动屏幕功能，可以自动滑动微视、抖音等。可以解放双手，让程序自己跑起来。滑动时间也是随机的，模拟人看时间时间。
Android实现界面左右滑动切换功能
08-31
总的来说，实现Android界面左右滑动切换功能主要依赖于`ViewPager`组件，并结合自定义适配器和适当的布局设计。通过这种方式，你可以创建出与QQ、微信等应用类似的功能，提供流畅且直观的用户体验。在实际开发中，...
FairyGUI-遮罩与滚动视图
成长ing中的w的专栏
05-10 3399
组件GComponent关于溢出部分处理，选择“可见”模式，再指定遮罩层，就实现了遮罩功能；如果设定成滚动，则变成了滚动视图。 导出资源 代码实现 using System.Collections; using System.Collections.Generic; using UnityEngine; using FairyGUI; /* * Author:W * 滚动视图 * GComponent组件有关于溢出处理 * 作用1：设置遮罩 * 作用2：设置滚动，滚动视图 *
fairyGUI界面控件的基本制作和功能实现
热门推荐
u013354943的博客
12-25 2万+
fairyGUI界面控件的基本制作和功能实现 —1.学习地址：官网和泰课在线 fairyGUI官网： http://www.fairygui.com/tutorial 泰课在线： http://www.taikr.com/cloud/search?q=fairyGUI 2.按钮   一般按钮有4个态：（点开按钮模块可查看）up/down/over/select
FairyGUI学习摘录
关大弓的博客
01-04 6381
素材管理 可以直接将图片（Gif）、声音(mp3)、动画、文字等素材从资源浏览器拖动到库中。 资源Url UIPackage.getItemURL(“包名“，“资源名”) AudioClip clip = (AudioClip)UIPackage.GetItemAsset(“包名称”,”声音名称”);菜单”编辑”->“创建位图字体”，（输入字符，显示对应图片） 多信息文本(GRichText
FGUI弧形UI实现
qq_36221481的博客
03-12 777
FGUI弧形UI实现
FairyGUI笔记：滑动条（十七）
baidu_29474379的博客
11-08 2467
命名约定 bar 当进度改变时，改变“bar”对象的宽度。一般用于横向的进度条。注意：一定要设置bar对象的宽度为进度条处于最大值时的宽度。 “bar”元件可以是任何类型，不限制于图片。 bar_v 当进度改变时，改变“bar_v”对象的高度。一般用于纵向的进度条。注意：一定要设置bar_v对象的高度为进度条处于最大值时的高度。 “bar_v”元件可以是任何类型，不限制于图片。 gr...
Unity FairyGUI（六）
zzzsss123333的博客
04-03 1536
Unity FairyGUI（六） 一.关联系统 官方文档 一般不会用代码设置关联，除非动态的列表需要设置时 UI的九宫格，自适应，随文本改变大小等功能 public class Lesson25 : MonoBehaviour { private void Start() { GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeigh
[Unity][FairyGUI]Glist滑动到底部或顶部
BuladeMian的博客，菜得抠脚，菜得真实
08-30 1101
GList list_.ScrollToView(list_.numChildren-1);//滑动到底部 (list_.numChildren > 0)?list_.ScrollToView(0)//滑动到顶部 :null; 相关资料: 1.[Unity][FairyGUI]GList更新 2. 参考资料: 1.Glist #虚拟列表 2.
fairyGUI实现文本可折叠
u013354943的博客
12-25 1743
fairyGUI实现文本可折叠 利用2个文本实现在需显示的内容超过9行时，第九行后面的文本显示“...”和展开按钮。 点击展开按钮，出现折叠按钮，文本超过12行时显示滚动条来实现文本的滚动浏览。 界面示意图如下： tf_limitAuto用于存放12行以内的文本显示，tf_auto用于显示展示折叠后超过12行的文本显示。 当tf_auto的文本超过12行后会触发控件的溢出，实现界面可
利用vue中的swipper组件实现视频上下滑动
06-02
Swiper是一个流行的轮播图组件，它可以帮助我们实现多种滑动效果，包括垂直滑动。我们可以利用Swiper组件实现视频上下滑动的效果。下面是一个简单的示例代码： ```html <template> <div class="swiper-container" ref="mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(video, index) in videos" :key="index"> <video :src="video.src" controls></video> </div> </div> </div> </template> <script> import Swiper from 'swiper'; export default { data() { return { videos: [ { src: 'video1.mp4' }, { src: 'video2.mp4' }, { src: 'video3.mp4' }, ], }; }, mounted() { this.swiper = new Swiper(this.$refs.mySwiper, { direction: 'vertical', slidesPerView: 'auto', freeMode: true, scrollbar: { el: '.swiper-scrollbar', }, }); }, beforeDestroy() { if (this.swiper) { this.swiper.destroy(); } }, }; </script> <style> .swiper-container { height: 100%; } .swiper-slide { height: 100%; display: flex; justify-content: center; align-items: center; } video { max-width: 100%; max-height: 100%; } </style> ``` 在上述代码中，我们首先引入Swiper组件，然后在Vue组件的mounted钩子函数中初始化Swiper实例。我们设置Swiper的direction属性为'vertical'表示垂直滑动，slidesPerView属性为'auto'表示自动适应视口宽度，freeMode属性为true表示自由模式，允许用户滑动到任意位置。我们还为Swiper添加了一个滚动条，用于滑动时的导航。最后，在Vue组件的beforeDestroy钩子函数中销毁Swiper实例，以释放资源。 在模板中，我们使用Swiper的类名'swiper-container'和'swiper-wrapper'来包装视频。我们为每个视频创建一个'swiper-slide'，并使用v-for指令动态地渲染视频列表。我们在每个'swiper-slide'中添加一个video标签，用于播放视频。我们还添加了一些样式，以使Swiper和视频正常工作。 通过上述代码，我们可以实现视频上下滑动的效果。用户可以通过滑动屏幕来切换不同的视频。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值