vux +pinchzoom插件，实现图片轮播，手动缩放（知识点：mounted和created的区别）

最新推荐文章于 2025-06-29 09:04:22 发布

xiaoxiaoman2010

最新推荐文章于 2025-06-29 09:04:22 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiaoxiaoman2010/article/details/84299739

本文介绍了一个基于Vue的图片轮播与放大组件实现，详细解释了如何利用Vue的生命周期钩子mounted和created进行初始化设置，以及如何使用map方法处理数组。通过实例展示了如何响应用户操作切换图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 图片放大页面 -->

<div class="shuffling">

<div class="box1">

<swiper :aspect-ratio="300/800" :min-moving-distance="200" @on-index-change="onSwiperItemIndexChange" v-model="swiperItemIndex" style="height:100vh">

<swiper-item class="swiper-demo-img" v-for="(item, index) in conlist" :key="index" v-if="item.photoPosition=='0' && item.photoPath != ''" style="height:100vh">
<img :src="FileServerAPI + item.photoPath" id="img" style="" :class="'zoom'+ index">
</swiper-item>

</swiper>



<!-- 左右箭头 -->

<img src="../assets/images/next-1.png" class="span2" @click="img1click()">

<img src="../assets/images/last.png" class="span1" @click="img2click()">



</div>

<!-- swiper second -->

<div class="box1-2">

<div class="box2">

<swiper :aspect-ratio="300/600" @on-index-change="onSwiperItemIndexChange" v-model="swiperItemIndex">

<swiper-item class="swiper-demo-img itemonce" v-for="(item, index) in conlist" :key="index" v-if="item.photoPosition=='0' && item.photoThumb != ''">

<div>

<img :src="base + item.photoThumb" @click="imagesdown(index)" width="20%" height="40px" >

</div>

</swiper-item>

</swiper>

</div>

</div>

</div>

import { Swiper } from 'vux'

import { setTimeout } from 'timers';

export default {

components: {

Swiper

},

data(){

return{

swiperItemIndex:this.$route.query.index, // 记录轮播图显示的第几张

conlist: [], // 接受接口回调函数数组

base: this.$store.state.base64,

FileServerAPI:this.$store.state.FileServerAPI,

index:"",

}

},

created(){

this.index=this.$route.query.index;

this.conlist=this.$route.query.obj;

},

mounted() {

//插件的使用

this.conlist.map((item,index)=>{

let el = document.querySelector('.zoom'+index)

new PinchZoom.default(el,{});

})

},

methods:{

// 点击右箭头

img1click () {

// console.log(this.swiperItemIndex)

// 如果当前的图片是图片的最后一张, 则让它永远为最后一张

if(this.swiperItemIndex<=this.conlist.length-1) {

this.swiperItemIndex += 1;

if (this.swiperItemIndex>=this.conlist.length-1) {

this.swiperItemIndex = this.conlist.length-1;

}

}
},

// 点击左箭头

img2click () {

// 如果当前图片不是最后一张, 可以向左轮播

if(this.swiperItemIndex<=this.conlist.length-1) {

this.swiperItemIndex -= 1;
// 如果轮播到第一张, 则让它永远是第一张
if (this.swiperItemIndex<=0) {
    this.swiperItemIndex = 0;
}
}
},
// 点击轮播图中的小圆点时, 已隐藏小圆点
imagesdown (index) {
this.swiperItemIndex = index;

}

}

}

知识点分析：

Vue生命周期中mounted和created的区别:

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

2.map的用法

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

callback需要有return值