直播平臺原始碼，圖片放大瀏覽功能

直播平臺原始碼，圖片放大瀏覽功能

HTML

<view>
<view>
<block v-for="(item,index) in fen">
<view>
<image @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>
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>

 以上就是 直播平臺原始碼，圖片放大瀏覽功能，更多內容歡迎關注之後的文章