先看看实际效果

实现原理
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源码下载

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

  1. 【咸鱼教程】本地图片上传。动态GIF表情图生成

    本案例参考:http://emoji.decathlon.trustingme.cn/但是实现方式不一样. 教程目录一 head first二 打开本地图片功能三 拖拽和缩放手势,调整图片四 gifj ...

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

    滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android. 下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善. 官方 ...

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

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

  4. 小程序组件 scroll-view 滑动

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  5. 循序渐进BootstrapVue，开发公司门户网站（4）--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...

  6. 一个H5的3D滑动组件实现(兼容2D模式)

    起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...

  7. iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...

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

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  9. [Android]使用ViewPager实现图片滑动展示

    在淘宝等电商的APP首页经常能看到大幅的广告位,通常有多幅经常更新的图片用于展示促销信息,如下图所示: 通常会自动滚动,也可以根据手势滑动.我没有研究过人家的APP是通过什么实现的,可能有第三方已经封 ...

随机推荐

  1. Android使用genymotion模拟器

    做android开发这么久了,最头痛的就是默认的模拟器慢的像蜗牛一样,实在是受够了.以前知道有genymotion存在,但是一直没有去用,今天下来用了下,哇,速度超快啊,还在用默认模拟器的小伙伴快来吧 ...

  2. 【ES】简单使用

    import sys reload(sys) sys.setdefaultencoding('utf-8') from datetime import datetime from elasticsea ...

  3. 本地文件到通过flume到kafka

    配置文件 cd /usr/app/flume1.6/conf vi flume-dirKakfa.properties #agent1 name agent1.sources=source1 agen ...

  4. SOCKET，TCP/IP,UDP,HTTP,FTP总结

    一.TCP/UDP,SOCKET,HTTP,FTP简析   TCP/IP是个协议组(主要解决数据如何在网络中传输),可分为三个层次:网络层.传输层和应用层: 网络层:IP协议.ICMP协议.ARP协议 ...

  5. The difference between the request time and the current time is too large.阿里云oss上传图片报错

    The difference between the request time and the current time is too large. 阿里云oss上传图片的时候报错如上, 解决办法,把 ...

  6. NetBpm 安装篇（1）

    尊重别人劳动成果 转载注明出处:http://www.cnblogs.com/anbylau2130/p/3875718.html 官方主页 http://www.netbpm.org/docs/in ...

  7. PHP开发中，让var_dump调试函数输出更美观 ^_^#

    前提:php必须安装Xdebug模块. 用var_dump打印输出时,输出的内容没有被格式化.如下图: 通常使用var_dump打印的内容是被格式化后输出的,如下图: 造成没有格式化输出的原因是因为p ...

  8. ios开发之--实现TextView提示文字并且输入字数限制

    实现字数控制和限制,并展示当前输入的字符串长度,以及按钮的点击状态,代码如下: 1,设置代理 @interface FKViewController ()<UITextViewDelegate& ...

  9. java.util.concurrent.RejectedExecutionException 线程池饱和

    java.util.concurrent.RejectedExecutionException at java.util.concurrent.ThreadPoolExecutor$AbortPoli ...

  10. 微信小程序实例源码大全2

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...