图片放大浏览功能

查看文档

uniapp

HTML

<view class="page">
			<view class="photosView">
				<block v-for="(item,index) in fen">
					<view class="box">
					<image class="logo" @click="previewImage(index)" :src="item.picture" mode=""></image>
					</view>
				</block>
			</view>
		</view>

JavaScript

<script>
	import glb from '@/config/glbData.js'
	import api from '@/api/searchSchool/school.js'
	export default {
    
    
		data() {
    
    
			return {
    
    
				linda:[],
				id:0,
				fen:null,
				ids:null

			}
		},
		onLoad(option) {
    
    
			console.log(option,'option11')
			this.id = option.id
			this.ids = option.ids
			console.log(this.id,this.ids,'22')
			this.mei()
		},
		methods: {
    
    
			previewImage(index) {
    
    
					let photoList = this.fen.map(item => {
    
    
						return item.picture;
						
					});
					
					uni.previewImage({
    
    
						current: index,
						urls: photoList
					});
				},

		mei() {
    
    
			let cs = this.id
			let cn = this.ids
			let code = {
    
    
				tenantId:glb.tenantId,
				type: cs
			}
			return api.meijin(code).then(res => {
    
    
			
				let con = res[1].data.result
				//console.log(con,'con11')
			    for(let i in con){
    
    
				     this.arr=con[0].twoList[cn]
					   this.linda.push(this.arr)
					   console.log(this.linda[0].tagName,'hahah')
				    this.fen = con[0].twoList[cn].threeList
					
				 //console.log(con[0].twoList[cn],'222')
				}
				//console.log(this.fen,res,'00000')
			});
		},
		}
	}
</script>

css

<style scoped lang="scss">
	body {
    
    
		background-color: #FFF;
	}

	.photosView {
    
    
		height: 100%;
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #FFF;

		.box {
    
    
			height: 200rpx;
			margin-bottom: 20rpx;
			width: 49%;

			image {
    
    
				width: 100%;
				height: 100%;
			}
		}
	}
</style>

以上代码请根据个人项目运行

猜你喜欢

转载自blog.csdn.net/wen15191038073/article/details/125336135
今日推荐