【咸鱼教程】EUI多图片滑动组件ScrollView

先看看实际效果

实现原理
1.  ScrollView继承eui.Scroll
2.  监听eui.Sroll的CHANGE_START和CHANGE_END事件,
      根据鼠标滑动距离,来改变视口viewport.scrollH,达到图片滑动的效果。

使用方法
1. 拖动组件到exml上
在自定义组件里,拖动ScrollView组件到exml上,将要显示的图片拖动到Scroll的Group下。ScrollView高宽一定要和图片高宽一致。

2. 设置Group的布局和水平间隔
比如如果是横着的图片滑动,就设置布局为HorizontalLayout。水平间隔一定要是0。

3.  没了,这样就OK了。
具体代码就不讲了,快下班了。自己下载demo看吧。

Demo源码下载

原文地址:https://www.cnblogs.com/gamedaybyday/p/9219969.html

时间: 2024-10-08 13:40:40

【咸鱼教程】EUI多图片滑动组件ScrollView的相关文章

19个非常有用的 jQuery 图片滑动插件和教程

jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天这篇文章向大家分享19个非常有用的 jQuery 图片滑动插件和教程. Slides Smooth Div Scroll Create an Image Rotator with Description Animate Panning Slideshow with jQuery Create a S

ReactNative学习-滑动查看图片第三方组件react-native-swiper

滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android. 下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善. 官方文档:https://github.com/leecade/react-native-swiper 效果图: 安装 npm install --save react-native-swiper 基础用法 import React, {AppRegistry,Component,StyleSheet,

webapp之滑动组件(基于zepto)

一直都没有封装过一套移动web下的滑动组件,正巧今天公司没事,就闲下来写了一个半成品,称之为半成品是因为,循环效果暂时还没有添加. ; (function($) { $.fn.slider = function(opts) { this.each(function() { init.call(this, opts); }); return this; }; function init(opts) { var defaults = { cont: this, contWidth: false, /

android滑动组件嵌套一般思路,多任务手势思路,触摸传递思路,【例】listview嵌套viewpager

在android UI开发中,我们经常会遇到这种需求: 两个支持滑动的组件,比如listview嵌套多个listview,listview的item是一个viewpager或gallary?亦或是scrollview嵌套scrollview等等. 一般情况下,你还可能需要支持如下几种功能: ¤ 两层组件都可以滑动 ¤ 不让两个组件同时滑动,或者让两个组件同时滑动并可以自己调节 ¤ 不影响底层view的子view和嵌套view的子view的点击事件 实现上述功能时,我们也经常遇到一些问题: ¤ 点

【ExtJS 4.x学习教程】(4)组件(Components)

作者:周邦涛(Timen) Email:[email protected] 转载请注明出处:  http://blog.csdn.net/zhoubangtao/article/details/27366477 1. 简介 一个Ext JS 应用的UI是由一个或多个叫做组件(Component)的小部件组成的.所有的组件都是Ext.Component的子类,Ext.Component可以使其子类参与自动化的声明周期管理,包括初始化.渲染.调整大小及位置和销毁.Ext JS提供了大量的直接可用的组

iSlider手机平台JS滑动组件

iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动.兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.你需要为iSlider先新建好数据: var data = [

个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/detail/gpowdhhk 快要下班了~先把代码放出来~~回家再编辑~ 这里是HTML代码: 1 <!--js酷炫图片滑动hover效果,类似拉勾网--> 2 <div class="beauty-go-outer" id="my-div"> 3

Android图片管理组件(双缓存+异步加载)

转自:http://www.oschina.net/code/snippet_219356_18887?p=3#comments ImageManager2这个类具有异步从网络下载图片,从sd读取本地图片,内存缓存,硬盘缓存,图片使用动画渐现等功能,已经将其应用在包含大量图片的应用中一年多,没有出现oom Android程序常常会内存溢出,网上也有很多解决方案,如软引用,手动调用recycle等等.但经过我们实践发现这些方案,都没能起到很好的效果,我们的应用依然会出现很多oom,尤其我们的应用包

UIScrollView控制图片滑动 NSTimer UIPageControl

1 #import "ViewController.h" 2 3 @interface ViewController ()<UIScrollViewDelegate> 4 @property(strong,nonatomic)UIScrollView * ScrollView; 5 @property(strong,nonatomic)UIImageView * view1; 6 7 @property(strong,nonatomic)UIPageControl * Pa