小程序怎么实现滑动图片中间放大 5C

请问各位大佬小程序怎么实现这种效果啊,十分感谢图片说明

4个回答

在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码:

js :
Page({
 data: {
  touch: {
   distance: 0,
   scale: 1,
   baseWidth: null,
   baseHeight: null,
   scaleWidth: null,
   scaleHeight: null
  }
 },
 touchStartHandle(e) {
 // 单手指缩放开始,也不做任何处理
 if (e.touches.length == 1) {
   console.log("单滑了")
 return
  }
  console.log('双手指触发开始')
 // 注意touchstartCallback 真正代码的开始
  // 一开始我并没有这个回调函数,会出现缩小的时候有瞬间被放大过程的bug
  // 当两根手指放上去的时候,就将distance 初始化。
  let xMove = e.touches[1].clientX - e.touches[0].clientX;
  let yMove = e.touches[1].clientY - e.touches[0].clientY;
  let distance = Math.sqrt(xMove * xMove + yMove * yMove);
 this.setData({
 'touch.distance': distance,
  })
 },
 touchMoveHandle(e) {
  let touch = this.data.touch
 // 单手指缩放我们不做任何操作
 if (e.touches.length == 1) {
   console.log("单滑了");
 return
  }
  console.log('双手指运动开始')
  let xMove = e.touches[1].clientX - e.touches[0].clientX;
  let yMove = e.touches[1].clientY - e.touches[0].clientY;
 // 新的 ditance
  let distance = Math.sqrt(xMove * xMove + yMove * yMove);
  let distanceDiff = distance - touch.distance;
  let newScale = touch.scale + 0.005 * distanceDiff
 // 为了防止缩放得太大,所以scale需要限制,同理最小值也是
 if (newScale >= 2) {
   newScale = 2
  }
 if (newScale <= 0.6) {
   newScale = 0.6
  }
  let scaleWidth = newScale * touch.baseWidth
  let scaleHeight = newScale * touch.baseHeight
 // 赋值 新的 => 旧的
 this.setData({
 'touch.distance': distance,
 'touch.scale': newScale,
 'touch.scaleWidth': scaleWidth,
 'touch.scaleHeight': scaleHeight,
 'touch.diff': distanceDiff
  })
 },
 load: function (e) {
 // bindload 这个api是<image>组件的api类似<img>的onload属性
 this.setData({
 'touch.baseWidth': e.detail.width,
 'touch.baseHeight': e.detail.height,
 'touch.scaleWidth': e.detail.width,
 'touch.scaleHeight': e.detail.height
  });
 }
})
然后将新获得的图片宽度和高度赋值给图片即可实现滑动缩放

wxml:

<image mode='scaleToFill' src='../../../images/01.jpg'
bindtouchstart='touchStartHandle'
bindtouchmove='touchMoveHandle'
bindload='load'
style="width: {{ touch.scaleWidth }}px;
height: {{ touch.scaleHeight }}px"></image>
最后,通过手机预览,就会发现已达到预想的效果!
xl1090453281
xl1090453281 您好,不用点击,是滑动,中间滑动选中的自动放大,划走缩小
大约一个月之前 回复

建议你使用swiper组件,有你想要的轮播效果。

xl1090453281
xl1090453281 swiper不能改width,
大约一个月之前 回复

wxml部分

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" previous-margin="-30rpx" next-margin="-30rpx" display-multiple-items="5" skip-hidden-item-layout="true" bindchange="swiperChange">
  <block wx:for="{{swiperList}}" wx:key="{{index}}">
    <swiper-item>
      <view class="{{ index == activeIndex ? 'active item-block' : 'item-block'}}">
        <image src="{{item}}" mode="aspectFill"></image>
      </view>
    </swiper-item>
  </block>
</swiper>

wxss部分

swiper{
  height: 350rpx;
}
swiper-item .item-block{
  padding: 0 10rpx;
  height: 350rpx;
  padding-top: 45rpx;
  overflow: hidden;
}
swiper-item .item-block image{
  width: 100%;
  height: 260rpx;
}
swiper-item .item-block.active{
  padding-top: 0;
}
swiper-item .item-block.active image{
  height: 350rpx;
}

js部分

Page({
  data: {
    swiperList: ['/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg','/images/1.jpg','/images/2.jpg'],
    activeIndex: 2
  },
  swiperChange(e) {
    console.log(e.detail.current)
    if(e.detail.current >= this.data.swiperList.length - 2) {
      e.detail.current = e.detail.current - this.data.swiperList.length
    }
    this.setData({
      activeIndex: e.detail.current + 2
    })
  }
})

图片说明

给你提供一下思路呗,就是当知道选了这张图片以后,你就更改他的样式,margin或者padding变大一下.这样就阔以解决这个问题了.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
百度小程序中实现类似3D的滑动轮播效果(如下图效果)

![图片说明](https://img-ask.csdn.net/upload/201901/08/1546929537_286403.gif) 这是一款叫唔哩星球的APP 中首页的轮播效果, 在小程序中如何实现就大佬们指点啊!

微信小程序上如何实现文字滚动

微信小程序上如何实现文字滚动,类似于那种新闻公告那种效果![图片说明](https://img-ask.csdn.net/upload/201705/19/1495174454_23527.png)

微信小程序Tabber半圆形样式如何实现?就是底部中间的大厅图标。

微信小程序Tabber半圆形样式如何实现?就是底部中间的大厅图标。

croll-view 组件中的元素如何实现自动滚动

请问 微信小程序中 scroll-view 组件中的元素如何实现自动滚动,就像轮播播放效果 scroll-view 中有多个view组件

原生微信小程序写一个横向滑动的日历

使用的原生开发的小程序,实现获取两周的日期,可以左滑显示后边的,可点击选择 ![图片说明](https://img-ask.csdn.net/upload/201908/02/1564713476_395186.png) 这是效果图

在div中滚动鼠标放大缩小图片

在div中滚动鼠标放大缩小图片, 并且能控制图片的最大像素,可以拖动图片,可以旋转图片。

移动端实现自适应滑动图片!

实现微信小程序里面的王者早知道里面的皮肤 点皮肤进去可以实现滑动。有没高手帮忙写个, 万分感激了。附上几张图片和实现效果。![图片说明](https://img-ask.csdn.net/upload/201702/21/1487689270_106561.jpg)![图片说明](https://img-ask.csdn.net/upload/201702/21/1487689287_469109.jpg) 实现如这样的效果,![图片说明](https://img-ask.csdn.net/upload/201702/21/1487689333_391915.jpg)

android横向滑动,并且自己滑动的图片回到中间位置

![图片说明](https://img-ask.csdn.net/upload/201507/10/1436520567_85626.png) 就像这张图一样,我可以滑动,使左右图片里的文字发生变化

android 图片滑动换位,左右两边图片与中间图片滑动换位

![图片说明](https://img-ask.csdn.net/upload/201507/05/1436089372_468539.png) 如图所示,左右两边图片与中间图片滑动换位,初始化的时候只有中间的“添加”图片,点击添加后动态的添加左右两边图片出来,有点着急,找不到好的解决方法,求大神指点

在ViewPager中的图片放大缩小事件与viewPager的滑动事件冲突了

我现在的状况是我在代码中写了一个图片的放大缩小,但是现在的情况是,在ViewPager中的图片要放大都放大,要是缩小都缩小,请问这个事情怎么解决呢?求助大神呢

在MFC中怎样通过滚动鼠标来实现图片的放大和缩小

求一个形成的代码啊?不知道怎么弄,搞了半天,希望寻求帮助,谢谢大家了。

iview 实现svg图片的放大缩小

在index.html文件里,一直引用不成功 <script type="text/javascript" src="<%= BASE_URL %>../src/assets/java-script/svg-pan-zoom.js"></script> vue怎么实现svg图片的滚动放大缩小,有没相应实例,谢谢

c#如何实现图片以鼠标位置为中心,放大图片。

想实现在picturebox里面,把picturebox的背景图片放大缩小。 并且以鼠标为中心,放大图片。就是鼠标放到哪,滑动滚轮,哪里的图片就会放大。

微信小程序 实现刮刮乐抽奖

谁使用小程序做过刮刮乐抽奖活动的小游戏? 求码。。。万分感谢

ionic 能不能实现像微信QQ那样的在相册界面放大图片和左右滑动?

imagepicker调用的相册只能单纯的选择图片然后确定~不能说就是能在相册里面放大图片 和放大后左右滑动。 ionic能不能实现在调用相册的时候在相册界面进行点击图片放大和左右滑动的功能。

微信小程序怎么拿云存储中的图片在前端做轮播图的图片

微信小程序怎么拿云存储中的图片在前端做轮播图的图片? 求代码!!!谢谢

wpf实现图片拖动缩放,新增滚动缩放 到图片原本大小就不缩放,拖动图片到边角就不拖动

/// <summary> /// Interaction logic for UserControl1.xaml /// </summary> public partial class UserControl1 : UserControl { public UserControl1() { InitializeComponent(); WPFWindow.MouseWheel += MainWindow_MouseWheel; image.MouseLeftButtonDown += image_MouseLeftButtonDown; image.MouseLeftButtonUp += image_MouseLeftButtonUp; image.MouseMove += image_MouseMove; } private Point origin; private Point start; /// <summary> /// 图片路径 /// </summary> /// <param name="fileName"></param> public void SetSource(string fileName) { image.Source = new BitmapImage(new Uri(fileName)); } /// <summary> /// 程序高度和宽度 /// </summary> /// <param name="height"></param> /// <param name="width"></param> public void setHeight_Width(int height,int width) { WPFWindow.Height = height; WPFWindow.Width = width; } private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { image.ReleaseMouseCapture(); } private void image_MouseMove(object sender, MouseEventArgs e) { if (!image.IsMouseCaptured) return; Point p = e.MouseDevice.GetPosition(border); Matrix m = image.RenderTransform.Value; m.OffsetX = origin.X + (p.X - start.X); m.OffsetY = origin.Y + (p.Y - start.Y); image.RenderTransform = new MatrixTransform(m); } private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if (image.IsMouseCaptured) return; image.CaptureMouse(); start = e.GetPosition(border); origin.X = image.RenderTransform.Value.OffsetX; origin.Y = image.RenderTransform.Value.OffsetY; } private void MainWindow_MouseWheel(object sender, MouseWheelEventArgs e) { Point p = e.MouseDevice.GetPosition(image); Matrix m = image.RenderTransform.Value; if (e.Delta > 0) m.ScaleAtPrepend(1.1, 1.1, p.X, p.Y); else m.ScaleAtPrepend(1 / 1.1, 1 / 1.1, p.X, p.Y); image.RenderTransform = new MatrixTransform(m); } /*xaml 页面*/ <UserControl x:Class="WpfControlLibrary1.UserControl1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" x:Name="WPFWindow" d:DesignHeight="610" d:DesignWidth="674" > <Grid> <Border Grid.Row="1" Name="border" ClipToBounds="True"> <Image Name="image" Opacity="1" /> </Border> </Grid> </UserControl> /**/ 本人网上当的代码, 现在想新增功能呢,就是图片滚动缩放 到图片原本大小就不缩放了,拖动到图片的边角就不拖动了,

小程序如何隐藏或者去掉横行滚动条?

小程序如何隐藏或者去掉横行滚动条? 用这个的话::-webkit-scrollbar { width: 0; height: 0; color: transparent; }会让图片变形。 还有其他的方法嘛

图片左右滑动的实现。

图片左右滑动插件怎么使用,用纯jquery代码怎么实现,用animate怎么实现,谢谢,有的话可以贴出源代码。谢谢

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

CSDN:因博主近期注重写专栏文章(已超过150篇),订阅博主专栏人数在突增,近期很有可能提高专栏价格(已订阅的不受影响),提前声明,敬请理解!

CSDN:因博主近期注重写专栏文章(已超过150篇),订阅博主专栏人数在突增,近期很有可能提高专栏价格(已订阅的不受影响),提前声明,敬请理解! 目录 博客声明 大数据了解博主粉丝 博主的粉丝群体画像 粉丝群体性别比例、年龄分布 粉丝群体学历分布、职业分布、行业分布 国内、国外粉丝群体地域分布 博主的近期访问每日增量、粉丝每日增量 博客声明 因近期博主写专栏的文章越来越多,也越来越精细,逐步优化文章。因此,最近一段时间,订阅博主专栏的人数增长也非常快,并且专栏价

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

培训班出来的人后来都怎么样了?(二)

接着上回说,培训班学习生涯结束了。后面每天就是无休止的背面试题,不是没有头脑的背,培训公司还是有方法的,现在回想当时背的面试题好像都用上了,也被问到了。回头找找面试题,当时都是打印下来天天看,天天背。 不理解呢也要背,面试造飞机,上班拧螺丝。班里的同学开始四处投简历面试了,很快就有面试成功的,刚开始一个,然后越来越多。不知道是什么原因,尝到胜利果实的童鞋,不满足于自己通过的公司,嫌薪水要少了,选择...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

工作八年,月薪60K,裸辞两个月,投简历投到怀疑人生!

近日,有网友在某职场社交平台吐槽,自己裸辞两个月了,但是找工作却让自己的心态都要崩溃了,全部无果,不是已查看无回音,就是已查看不符合。 “工作八年,两年一跳,裸辞两个月了,之前月薪60K,最近找工作找的心态崩了!所有招聘工具都用了,全部无果,不是已查看无回音,就是已查看不符合。进头条,滴滴之类的大厂很难吗???!!!投简历投的开始怀疑人生了!希望 可以收到大厂offer” 先来看看网...

97年世界黑客编程大赛冠军作品(大小仅为16KB),惊艳世界的编程巨作

这是世界编程大赛第一名作品(97年Mekka ’97 4K Intro比赛)汇编语言所写。 整个文件只有4095个字节, 大小仅仅为16KB! 不仅实现了3D动画的效果!还有一段震撼人心的背景音乐!!! 内容无法以言语形容,实在太强大! 下面是代码,具体操作看最后! @echo off more +1 %~s0|debug e100 33 f6 bf 0 20 b5 10 f3 a5...

不要再到处使用 === 了

我们知道现在的开发人员都使用 === 来代替 ==,为什么呢?我在网上看到的大多数教程都认为,要预测 JavaScript 强制转换是如何工作这太复杂了,因此建议总是使用===。这些都...

什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站?00后的世界我不懂!

A站 AcFun弹幕视频网,简称“A站”,成立于2007年6月,取意于Anime Comic Fun,是中国大陆第一家弹幕视频网站。A站以视频为载体,逐步发展出基于原生内容二次创作的完整生态,拥有高质量互动弹幕,是中国弹幕文化的发源地;拥有大量超粘性的用户群体,产生输出了金坷垃、鬼畜全明星、我的滑板鞋、小苹果等大量网络流行文化,也是中国二次元文化的发源地。 B站 全称“哔哩哔哩(bilibili...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

MySQL性能优化(五):为什么查询速度这么慢

前期回顾: MySQL性能优化(一):MySQL架构与核心问题 MySQL性能优化(二):选择优化的数据类型 MySQL性能优化(三):深入理解索引的这点事 MySQL性能优化(四):如何高效正确的使用索引 前面章节我们介绍了如何选择优化的数据类型、如何高效的使用索引,这些对于高性能的MySQL来说是必不可少的。但这些还完全不够,还需要合理的设计查询。如果查询写的很糟糕,即使表结构再合理、索引再...

用了这个 IDE 插件,5分钟解决前后端联调!

点击上方蓝色“程序猿DD”,选择“设为星标”回复“资源”获取独家整理的学习资料!作者 |李海庆我是一个 Web 开发前端工程师,受到疫情影响,今天是我在家办公的第78天。开发了两周,...

大厂的 404 页面都长啥样?最后一个笑了...

每天浏览各大网站,难免会碰到404页面啊。你注意过404页面么?猿妹搜罗来了下面这些知名网站的404页面,以供大家欣赏,看看哪个网站更有创意: 正在上传…重新上传取消 腾讯 正在上传…重新上传取消 网易 淘宝 百度 新浪微博 正在上传…重新上传取消 新浪 京东 优酷 腾讯视频 搜...

【高并发】高并发秒杀系统架构解密,不是所有的秒杀都是秒杀!

网上很多的文章和帖子中在介绍秒杀系统时,说是在下单时使用异步削峰来进行一些限流操作,那都是在扯淡! 因为下单操作在整个秒杀系统的流程中属于比较靠后的操作了,限流操作一定要前置处理,在秒杀业务后面的流程中做限流操作是没啥卵用的。

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

Java14 新特性解读

Java14 已于 2020 年 3 月 17 号发布,官方特性解读在这里:https://openjdk.java.net/projects/jdk/14/以下是个人对于特性的中文式...

爬虫(101)爬点重口味的

小弟最近在学校无聊的很哪,浏览网页突然看到一张图片,都快流鼻血。。。然后小弟冥思苦想,得干一点有趣的事情python 爬虫库安装https://s.taobao.com/api?_ks...

疫情后北上广深租房价格跌了吗? | Alfred数据室

去年3月份我们发布了《北上广深租房图鉴》(点击阅读),细数了北上广深租房的各种因素对租房价格的影响。一年过去了,在面临新冠疫情的后续影响、城市尚未完全恢复正常运转、学校还没开学等情况下...

面试官给我挖坑:a[i][j] 和 a[j][i] 有什么区别?

点击上方“朱小厮的博客”,选择“设为星标”后台回复&#34;1024&#34;领取公众号专属资料本文以一个简单的程序开头——数组赋值:int LEN = 10000; int[][] ...

又一起程序员被抓事件

就在昨天互联网又发生一起让人心酸的程序员犯罪事件,著名的百度不限速下载软件 Pandownload PC 版作者被警方抓获。案件大致是这样的:软件的作者不仅非法盗取用户数据,还在QQ群进...

应聘3万的职位,有必要这么刁难我么。。。沙雕。。。

又一次被面试官带到坑里面了。面试官:springmvc用过么?我:用过啊,经常用呢面试官:springmvc中为什么需要用父子容器?我:嗯。。。没听明白你说的什么。面试官:就是contr...

太狠了,疫情期间面试,一个问题砍了我5000!

疫情期间找工作确实有点难度,想拿到满意的薪资,确实要点实力啊!面试官:Spring中的@Value用过么,介绍一下我:@Value可以标注在字段上面,可以将外部配置文件中的数据,比如可以...

Intellij IDEA 美化指南

经常有人问我,你的 IDEA 配色哪里搞的,我会告诉他我自己改的。作为生产力工具,不但要顺手而且更要顺眼。这样才能快乐编码,甚至降低 BUG 率。上次分享了一些 IDEA 有用的插件,反...

【相亲】96年程序员小哥第一次相亲,还没开始就结束了

颜值有点高,条件有点好

太厉害了,终于有人能把TCP/IP 协议讲的明明白白了

一图看完本文 一、 计算机网络体系结构分层 计算机网络体系结构分层 计算机网络体系结构分层 不难看出,TCP/IP 与 OSI 在分层模块上稍有区别。OSI 参考模型注重“通信协议必要的功能是什么”,而 TCP/IP 则更强调“在计算机上实现协议应该开发哪种程序”。 二、 TCP/IP 基础 1. TCP/IP 的具体含义 从字面意义上讲,有人可能会认为...

腾讯面试题: 百度搜索为什么那么快?

我还记得去年面腾讯时,面试官最后一个问题是:百度/google的搜索为什么那么快? 这个问题我懵了,我从来没想过,搜素引擎的原理是什么 然后我回答:百度爬取了各个网站的信息,然后进行排序,当输入关键词的时候进行文档比对……巴拉巴拉 面试官:这不是我想要的答案 我内心 这个问题我一直耿耿于怀,终于今天,我把他写出来,以后再问,我直接把这篇文章甩给他!!! 两个字:倒排,将贯穿整篇文章,也是面试官...

相关热词 c# 按行txt c#怎么扫条形码 c#打包html c# 实现刷新数据 c# 两个自定义控件重叠 c#浮点类型计算 c#.net 中文乱码 c# 时间排序 c# 必备书籍 c#异步网络通信
立即提问