vue图片左右滑动及手势缩放

最新推荐文章于 2025-07-01 10:46:13 发布
最新推荐文章于 2025-07-01 10:46:13 发布
阅读量8.6k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ttn456456/article/details/80220716
本文介绍如何在Vue项目中使用vue-awesome-swiper组件实现图片左右滑动及手势缩放的功能，通过配置swiper选项和监听手势事件，达到良好的用户体验。

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

引入vue-awesome-swiper

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
components: {
  swiper,
  swiperSlide,
},
data() {
  return {
    swiperOption: {
      width: window.innerWidth,
      zoom : true,
      initialSlide: 0,
    },
  };
},
<swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
  <swiper-slide v-for="(img, index) in previewImg">
    <div class="swiper-zoom-container">
      <img :src="img" alt="">
    </div>
  </swiper-slide>
</swiper>




                

        

    

    
  



    

      

        

            

              
                
                  ttn456456
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
vue实现点击按钮图片左右滚动

				
			

			

				

					qq_30228701的博客
				

				

					10-29
					
					1003
					
				

			

		

		

			
				
1、HTML部分
<el-row :gutter="20">
    <el-col :xs="24" :sm="24" :md="24">
        <div class="jxIndexFrame">
            <span class="jxIndexTitle">荣誉资质</span>
            <div class="certificateModel">
                <

			
		

	



                

            
              



	

		

			

				
					
vue-awesome-swiper  安装 轮播图  手指控制图片放大缩小

				
			

			

				

					yongyafang123的博客
				

				

					05-09
					
					2604
					
				

			

		

		

			
				
**
安装：
**
npm install vue-awesome-swiper --save

main.js中添加

全部引用

import vueSwiper from 'vue-awesome-swiper' // 引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css' // 引入样式

Vue.use(vueSwiper) //...

			
		

	



              


  
              

                


	

		

			

				
					
vue移动端双指缩放

					
最新发布

				
			

			

				

					Hi_qing的博客
				

				

					07-01
					
					171
					
				

			

		

		

			
				
【代码】vue移动端双指缩放。

			
		

	





	

		

			

				
					
vue项目中鼠标滚轮缩放图片大小和拖拽效果

				
			

			

				

					JackieDYH的博客
				

				

					11-02
					
					5157
					
				

			

		

		

			
				
这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动@mousewheel.prevent 阻止默认行为


示例代码


<template>
  <div span="8" class="left" @mousewheel.prevent="rollImg">
    <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move" />
  <..

			
		

	



		

			
		



	

		

			

				
					
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）

				
			

			

				

					赏樱看雪撸代码
				

				

					06-15
					
					1万+
					
				

			

		

		

			
				
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。

			
		

	





	

		

			

				
					
vue 实现图片滚动

				
			

			

				

					qq_33240556的博客
				

				

					06-29
					
					2005
					
				

			

		

		

			
				
在Vue中实现图片滚动，可以通过几种不同的方法来完成，包括使用原生CSS、JavaScript以及现有的Vue组件库。这里提供一个基本示例，展示如何结合Vue和第三方库（如vue-seamless-scroll）来实现图片的左右滚动效果。

			
		

	





	

		

			

				
					
vue使用swiper插件实现左右滑动+使用插件Easyscroller实现双指放大

				
			

			

				

					weixin_44856917的博客
				

				

					09-06
					
					848
					
				

			

		

		

			
				
vue使用swiper插件实现左右滑动+使用插件Easyscroller实现双指放大
(多张图片左右滑动+双指放大缩小)

			
		

	





	

		

			

				
					
Vue图片左右滚动切换插件

				
			

			

				

					ICode联盟
				

				

					09-29
					
					971
					
				

			

		

		

			
				
Vue图片左右滚动切换插件，左右箭头图片滚动效果。

			
		

	





	

		

			

				
					
vue使用swiper实现左右滑动切换图片

				
			

			

				

					01-18
				

			

		

		

			
				
本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下
使用npm 安装vue-awesome-swiper

npm install vue-awesome-swiper --save
在main.js中引用

import VueAwesomeSwiper from &#39;vue-awesome-swiper&#39;
Vue.user(VueAwesomeSwiper)
import &#39;swiper/dist/css/swiper.css&#39;
在组件中使用

<template>
 <div>
  <label class=timeline>{{ tim

			
		

	





	

		

			

				
					
vue实现图片滚动（类似走马灯效果）

					
热门推荐

				
			

			

				

					南宫凌萱的博客
				

				

					06-07
					
					3万+
					
				

			

		

		

			
				
上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。
父：

   
      
            -----使用子组件传过来的值，封装slot
                
                    
                        
          

			
		

	





	

		

			

				
					
vue左右滑动

				
			

			

				

					06-13
				

			

		

		

			
				
该文档是一个vue写的模仿探探app的一个小功能，左右滑动

			
		

	





	

		

			

				
					
vue,原生js左右无缝滚动

				
			

			

				

					09-03
				

			

		

		

			
				
原生js左右无缝滚动，封装了vue组件。鼠标经过左右的图标左右滚动。经过中间部分停止滚动。 大部分步骤有注释。供学习参考。

			
		

	





	

		

			

				
					
图片横向动画滚动

				
			

			

				

					03-13
				

			

		

		

			
				
图片的横向滚动,自己从右向左运动,光标移动后停止

			
		

	





	

		

			

				
					
vue3 图片左右无限滚动-轮播功能

				
			

			

				

					thj13896076523的博客
				

				

					06-08
					
					3657
					
				

			

		

		

			
				
使用
<carouselPlay :sliders="imgs" :autoplay='true' :duration="5"></carouselPlay>

代码部分
<template>
  <div class='xtx-carousel' @mouseenter="stop()" @mouseleave="start()">
    <ul class="carousel-body" ref="carousel">
      <!

			
		

	





	

		

			

				
					
Vue中左右循环滚动文字或图片

				
			

			

				

					行内元素如何居中
				

				

					09-24
					
					2270
					
				

			

		

		

			
				
<template>
 <div class="bottom_zj">
      <div
        ref="innerref"
        class="outer-box"
        @mouseenter="mouseenter"
        @mouseleave="mouseleave"
      >
        <div ref="innerref1" class="inner-box1">
          &lt

			
		

	





	

		

			

				
					
 我用vue写了一个简单的支持左右滑动的图片轮播组件，请大家指点

				
			

			

				

					weixin_34353714的博客
				

				

					12-29
					
					2263
					
				

			

		

		

			
				
最近在尝试重构公司网站，需要用到轮播图，因为网站比较简单，不想因为第三方插件，就自己写了一个轮播组件，引入腾讯的手势操作库就可以滑动了main.js
import AlloyFinger from 'alloyfinger'
import AlloyFingerVue from 'alloyfinger/vue/alloy_finger....

			
		

	





	

		

			

				
					
el图片滚动_vue使用swiper实现左右滑动切换图片

				
			

			

				

					weixin_39777540的博客
				

				

					12-19
					
					834
					
				

			

		

		

			
				
本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下使用npm 安装vue-awesome-swipernpm install vue-awesome-swiper --save在main.js中引用import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.user(VueAwesomeSwiper)im...

			
		

	





	

		

			

				
					
vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作）

				
			

			

				

					weixin_34162228的博客
				

				

					05-09
					
					1150
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
pc 图片预览放大 端vue_vue实现点击图片放大效果

				
			

			

				

					weixin_39757743的博客
				

				

					12-20
					
					264
					
				

			

		

		

			
				
本文实例为大家分享了vue点击图片放大展示的具体代码，供大家参考，具体内容如下1.建立子组件,来实现图片方法功能: BigImg.vue  　　　　　　 export default {props: ['imgSrc'],//接受图片地址methods: {bigImg() {// 发送事件this.$emit('clickit')}}}/*动画*/.fade-enter-active,.fade...

			
		

	





	

		

			

				
					
vue3 vue-konva如何控制图片缩放

				
			

			

				

					04-21
				

			

		

		

			
				
### Vue3 中使用 `vue-konva` 库控制图片缩放的实现方法

在 Vue3 中，可以利用 `vue-konva` 库结合 Konva 的强大功能来实现对图片的缩放操作。以下是具体的实现方式：

#### 实现思路
为了实现图片的缩放效果，可以通过绑定事件监听器到鼠标滚轮或触摸手势上，并动态调整图片的比例属性 (`scaleX` 和 `scaleY`) 来完成。

---

#### 示例代码

以下是一个完整的 Vue3 组件示例，展示了如何使用 `vue-konva` 控制图片的缩放：

```javascript
<template>
  <v-stage :config="stageConfig">
    <v-layer>
      <v-image :config="imageConfig" @wheel="handleWheel" />
    </v-layer>
  </v-stage>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const stageConfig = ref({
      width: 800,
      height: 600,
    });

    const imageConfig = ref({
      x: 50,
      y: 50,
      scaleX: 1,
      scaleY: 1,
      rotation: 0,
      draggable: true,
    });

    let originalImage;

    function loadImage() {
      const img = new window.Image();
      img.src =
        "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_star.svg/768px-Red_star.svg.png"; // 替换为你自己的图片路径
      img.onload = () => {
        originalImage = img;
        imageConfig.value.image = img;
      };
    }

    function handleWheel(e) {
      e.evt.preventDefault(); // 阻止默认滚动行为
      const oldScale = imageConfig.value.scaleX;
      const delta = e.evt.deltaY < 0 ? 0.1 : -0.1; // 缩放步长
      const newScale = Math.max(0.1, oldScale + delta); // 设置最小比例为0.1

      // 更新 scale 属性
      imageConfig.value.scaleX = newScale;
      imageConfig.value.scaleY = newScale;

      // 计算新的位置以保持鼠标焦点不变
      const pointerPosition = e.target.getStage().getPointerPosition();
      const stagePixelRatio = e.target.getStage().pixelRatio;
      const posOnImgBeforeZoom = {
        x: (pointerPosition.x - imageConfig.value.x) / oldScale,
        y: (pointerPosition.y - imageConfig.value.y) / oldScale,
      };

      const newPosX = pointerPosition.x - posOnImgBeforeZoom.x * newScale;
      const newPosY = pointerPosition.y - posOnImgBeforeZoom.y * newScale;

      imageConfig.value.x = newPosX / stagePixelRatio;
      imageConfig.value.y = newPosY / stagePixelRatio;
    }

    loadImage();

    return {
      stageConfig,
      imageConfig,
      handleWheel,
    };
  },
};
</script>
```

---

#### 关键点解析

1. **加载图片**: 使用 HTML `<img>` 元素异步加载外部图片资源[^4]。
2. **绑定事件**: 利用 `@wheel` 事件监听鼠标的滚轮动作，从而触发缩放逻辑[^5]。
3. **计算新坐标**: 当改变图片大小时，需重新计算图片的位置，以便使放大缩小围绕当前鼠标指针为中心发生[^6]。
4. **防止过度缩放**: 添加条件判断，确保图片不会被无限缩小至不可见状态[^7]。

---

###

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值