Uniapp中使用fancyapps图片画廊幻灯片

 注：需要先在HbuildX中安装内置终端。

然后在项目根目录运行npm init -y

然后再按照fancyapps官网文档中的命令安装用到的包

npm install @fancyapps/ui
// or
yarn add  @fancyapps/ui

 一：HTML部分

<view class="productList">
	<view class="item" v-for="(item, index) in productList" :key="item.id"  data-fancybox="gallery" :href="item.thumb">
		<image :src="item.thumb" mode="widthFix" class="w100"></image>
		<text class="title">{{ item.title }}</text>
	</view>
</view>

 关键是加上了：data-fancybox="gallery" :href="item.thumb"

二：JS部分，直接在script中引入

import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";

三：Style部分，直接在style中引入，（不介意的话就直接用CDN就行)

@import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css');

四：在uniapp页面的onLoad里面写入fancyapps的JS代码，（我都是在示例中直接复制的)

Fancybox.bind('[data-fancybox="gallery"]', {
			  dragToClose: false,
			
			  Toolbar: false,
			  closeButton: "top",
			
			  Image: {
			    zoom: false,
			  },
			
			  on: {
			    initCarousel: (fancybox) => {
			      const slide = fancybox.Carousel.slides[fancybox.Carousel.page];
			
			      fancybox.$container.style.setProperty(
			        "--bg-image",
			        `url("${slide.$thumb.src}")`
			      );
			    },
			    "Carousel.change": (fancybox, carousel, to, from) => {
			      const slide = carousel.slides[to];
			
			      fancybox.$container.style.setProperty(
			        "--bg-image",
			        `url("${slide.$thumb.src}")`
			      );
			    },
			  },
			});