Home

Awesome

欢迎使用多端画廊组件(ynGallery)

@(组件)[画廊|影讯|图展|滑动|grally|Swiper|vue|uni-app|]

画廊组件ynGrally是一款在UNI-APP上开发的多端通用图片展示组件,支持调节画廊高度,图片高宽,背景过渡色,定义角标,描述,背景融合过渡,流畅的滑动感!体验感不错。

enter image description here

这是微信开发工具上的gif截图(由于gif 200多色的限制,背景看起来光晕,其实很平滑的)

使用(开发工具 Hbuilder X ver 1.8 或 以上)

本组件同时发布在 uniapp上 https://ext.dcloud.net.cn/plugin?id=282

快速使用

组件我放在了压缩包内示例项目ynGalleryDemo 的components\YnComponents 下了,可以用示例工程测试效果!

以下是基本调用:
script处引用
     import ynGallery from 'components/YnComponents/ynGallery/ynGallery.vue
     
接着注册
     components: {ynGallery}
简单的一句话 调用
  <ynGallery :images="testimgs" ></ynGallery> 
  
  其中示例数组testimg格式:
  	testimgs :[{url:"你的图片地址"},{url:"你的图片地址2"},...]  
将显示:

enter image description here

单调了点,我们可以加上详细参数,这里有一些效果图!

enter image description here

enter image description here

enter image description here

enter image description here

详细的调用代码(参数值基本是默认值,可以不填 也可以根据需要修改):
 	<ynGallery  					          
	  :galleryheight="165" 
	   bkstart="#000000"                     
	   bkend="#000000" 							  
	  :imgviewwidth="85" 
	  :imgviewheight="105"
	  :showbadge="true"
	   badegtype="trian"
	   badegwidth="25"
	   badegheight="25"
	  :showdec="true"
	  :images="testimgs" 
	  @clickimg="onclickimg"
	  >   
</ynGallery>

 

ynGallery参数列表说明

参数类型默认值说明
galleryheightNumber165画廊高度 单位px
imgviewwidthNumber85图片框宽度 单位px
imgviewheightNumber105图片框高度 单位px
bkstartString#000000背景起始色
bkendString#000000背景终止色
showbadgeBooleanfalse是否显示角标
badegtypeStringtrian角标类型 round:圆角类型 trian:三角类型
badegwidthString25角标宽度 (仅仅对三角角标有效)单位px
badegheightString25角标高度 (仅仅对三角角标有效)单位px
showdecBooleanfalse是否显示描述
imagesObject图源数组对象,结构看下面说明
images图源数组成员对象结构:
          imgobj:{index:0,
                  dec:'',                   //图像描述信息
	      badeg:'',                 //角标文字
	      badegcolor:'#000000',     //角标颜色
	      url:'',                   //图源  
	      dominant:''               //主色  
              }   
事件
名称:clickimg:  
参数:clickimg(imgviewobj)
其中  imgviewobj:基本结构同上imgobj,其中imgviewobj.index (表示当前焦点图)
     
      
Demo

参考 ynGalleryDemo 示例 放入HBX中运行

注意

请用HBX1.8以上版本(该版本起对于滑动操作提高了性能,特别是APP平台)

结束感谢!