uniapp开发微信小程序之图片预览

最新推荐文章于 2024-12-13 16:18:52 发布

原创最新推荐文章于 2024-12-13 16:18:52 发布 · 854 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #uni-app #小程序

uniapp 专栏收录该内容

10 篇文章

订阅专栏

在uniapp小程序中，实现商品列表图片点击放大预览功能，需注意关闭预览时会触发onShow，可能重置页面状态。为防止数据丢失，需在onShow中保存或检查数据，例如在商品添加到购物车场景中。

实现目标：商品列表中展示商品图片，点击商品图片，图片放大，实现预览。
这个功能直接调用uniapp小程序的方法就可以；但是需要注意的是，关闭预览图片时，会调用onShow，如果页面进行了一些操作，要及时保存数据，或者在onShow中进行判断。譬如我用的地方是将商品加入购物车，购物车是弹窗实现的，在onShow中有请求商品的初始数据；点击商品图片预览，关闭预览，商品的数据又恢复成初始数据，购物车也恢复原始状态。

<view class="data_item" v-for="(item,index) in dataList" :key="index">
	<view class="data_img">
		<img :src="item.picUrl" @click="clickImg(item.picUrl, index)">
	</view>
</view>

<script>
	export default {
		data(){
			return{
				dataList:[], // 加入购物车的菜品
				noexebshowFalg:true,
			}
		},
		onLoad(){
			
		},
		onShow() {
		   if(this.noexebshowFalg){
		   // 放置的是初始化数据，如果是预览关闭则不会走这一步
		   }
		},
		methods:{
			clickImg(url, index){
				this.noexebshowFalg=false;
				var imageArr = [];
				imageArr.push(url);
				//uniapp预览轮播图方法
				uni.previewImage({
					current:index, //预览图片的下标
					urls:imageArr //预览图片的地址，必须要数组形式
				})
			},
		}
	}
</script>