微信小程序，基于uni-app的轮播图制作，轮播图本地文件图片预览

完整代码

<template><swiper class="banner" indicator-dots circular :autoplay="false"><swiper-item v-for = "item in picture" :key="item.id"><view><image @tap="onPreviewImage(item.img)" :src = "item.img"></image></view></swiper-item></swiper>
</template><script>export default {data() {return {//轮播图数据picture : [{ id: '1', img: "/static/tabs/home_default.png"},{ id: '2', img: "/static/tabs/home_selected.png"}]}},onLoad() {},methods: {onPreviewImage(img){// console.log(url)wx.previewImage({urls: this.picture.map(item=>item.img),current: img})}}}
</script><style>.banner,.banner image{width: 750rpx;height: 750rpx;}
</style>

关键代码

• 绑定点击时间，并传送img地址

<image @tap="onPreviewImage(item.img)" :src = "item.img"></image>

• 设置图片预览

		methods: {onPreviewImage(img){// console.log(url)wx.previewImage({urls: this.picture.map(item=>item.img),current: img})}}