uniapp-轮播图点击预览功能

实现效果

uniapp-轮播图点击预览功能_第1张图片

点击后打开预览图

uniapp-轮播图点击预览功能_第2张图片

实现代码


	
		
	


methods: {
	handleBanner(index) {
		uni.previewImage({
			current: index, //预览图片的下标
			urls: this.newBannerList //预览图片的地址,必须要数组形式
		})
	},
},

因为我的 bannerList 数组内是存的去除了基地址的地址 所以直接写在urls 后是无法显示的 这里需要的是全路径

所以在created 或mounted的钩子内去加上转换的代码

this.newBannerList = newList.map(item => this.baseUrl + item);

this.baseUrl 是基地址

你可能感兴趣的:(uni-app,uni-app,前端,小程序)