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平台）

结束感谢！