本文主要和大家分享微信小程式開發之圖片拖曳功能的實現,拖曳功能我們會經常遇到,希望能幫助到大家。
1.寫頁面結構:moveimg.wxml
<view class="container" style="height:{{screenHeight}}px;" > <view class="cnt"> <image class="image-style" src="../uploads/2.jpg" style="width: {{imgwidth}}px;height:{{imgheight}}px;"bindtouchstart="startEvent" bindtouchmove="moveEvent"bindload="imageLoad"animation=" {{animationData}}"bindtouchend="endEvent"> </image> </view> </view>
2.寫頁面樣式:moveimg.wxss
.container { box-sizing:border-box; padding:1rem; } .cnt{ width:100%; height:70%; border: 1px solid #ccc; position:relative; overflow: hidden; z-index:9999; } .image-style{ -webkit-transform:translate(-38px,0px); }
3.設定資料:moveimg.js
var app = getApp() Page({ data: { imgwidth:0, imgheight:0, animationData: {}, movex:0, movey:0, x:0, y:0, }, onLoad: function() { // 页面初始化 options为页面跳转所带来的参数 var _this = this; wx.getSystemInfo({ success: function(res) { _this.setData({ screenHeight: res.windowHeight, screenWidth: res.windowWidth, }); } }); }, onReady:function(){ // 页面渲染完成 //实例化一个动画 this.animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear',//均匀 transformOrigin: "left top 0px", }) }, imageLoad: function(e) { var _this=this; //1.框的宽高 var cnt_offetw=_this.data.screenWidth-38, cnt_offeth=(_this.data.screenHeight-38)*0.7; //2.获取图片真实宽度 var $width=e.detail.width, //获取图片真实宽度 $height=e.detail.height, ratio=$width/$height; //图片的真实宽高比例 //3.进行判断:当图片小于框时候,图片大小等于框大小,当大于框的时候,则成比例呈现 var viewWidth=_this.data.screenWidth; //设置图片固定宽度值, var viewHeight=parseInt(viewWidth/ratio); //计算的高度值 if (viewHeight< cnt_offeth) { viewHeight=cnt_offeth; } _this.setData({ imgwidth:viewWidth, imgheight:viewHeight, cnt_boxw:cnt_offetw, cnt_boxh:cnt_offeth, }) }, startEvent:function(e){ //1.获取鼠标点击下去的 this.setData({ startx: e.touches[0].pageX, starty: e.touches[0].pageY }) }, moveEvent: function(e) { var _this=this; //2.鼠标移动的位置 var pageX = e.touches[0].pageX; var pageY = e.touches[0].pageY; var x,y; //3.记住初始化图片x,y var endx=_this.data.x,endy=_this.data.y; //4.判断 var w_x=_this.data.imgwidth-_this.data.cnt_boxw;//x拖拽值:图片宽-框的宽 var h_y=parseInt(_this.data.imgheight-_this.data.cnt_boxh);//y拖拽值:图片高-框高 var DistanceX = pageX - _this.data.startx;//x:当鼠标点击到移动的点之间的距离 var DistanceY =pageY - _this.data.starty;//y:当鼠标点击到移动的点之间的距离 if (DistanceX>0){ //往右移动 如果当前的值大于等于0时则不移动,否则当前值加上鼠标拖拽的距离 if (endx >= 0) { x = 0; } else { x = endx + DistanceX; } }else{ //往左移动:x拖拽值大于等于当前的值,说明已经到边上了,就等于拖拽值,否则当前的值加上鼠标拖拽的距离 if (w_x >= endx) { x = -w_x; } else { x = endx + DistanceX; } } if (DistanceY>0){ //往下移动:如果当前的值大于等于0时则不移动,否则当前值加上鼠标拖拽的距离 if(endy>=0){ y =0; }else{ y = endy + DistanceY; } }else{ //往上移动:y拖拽值大于等于当前的值,说明已经到边上了,就等于拖拽值,否则当前的值加上鼠标拖拽的距离 if(-endy==h_y||-endy>h_y){ y=-h_y; console.log("da0") }else{ y=endy+DistanceY; console.log("da 1") } } setTimeout(function() { _this.animation.translate(x, y).step(); _this.setData({ animationData: this.animation.export() }) }.bind(this), 0) _this.setData({ x:x, y:y, }) endx=x;endy=y;//记住这次的图片移动的范围 _this.data.startx=pageX;_this.data.starty=pageY;// 每移动一次把上一次的点作为原点 }, endEvent:function(){ clearTimeout(function(){ this.animation.translate(this.data.x,this.data.y).step(); this.setData({ animationData: this.animation.export() }) }); } })
由於上次做的這個有問題,並沒有記錄上一次移動的效果。所以這次我使用了洪荒之力,修改下程式碼。
相關推薦:
JavaScript實作文字與圖片拖曳效果的方法_javascript技巧
#以上是微信小程式開發之圖片拖曳功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 Linux新版
SublimeText3 Linux最新版

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載
最受歡迎的的開源編輯器

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。