微信小程序开发图片拖拽实例详解


Posted in Javascript onMay 05, 2017

微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解

1.编写页面结构:moveimg.wxml

<view class="container"> 
  <view class="cnt"> 
    <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bindtouchmove="ballMoveEvent"> 
    </image> 
  </view> 
</view>

2.编写页面样式:moveimg.wxss

.container { 
  box-sizing:border-box; 
  padding:1rem; 
} 
.cnt{ 
  width:100%; 
  height:15rem; 
  border: 1px solid #ccc; 
  position:relative; 
  overflow: hidden; 
} 
.image-style{  
  position: absolute;  
  top: 0px;  
  left:0px;  
  height:100%;  
}

3.设置数据:moveimg.js

var app = getApp() 
Page({ 
  data: { 
    ballleft:-20, 
    screenWidth: 0, 
  }, 
  onLoad: function() { 
    var _this = this; 
    wx.getSystemInfo({ 
      success: function(res) { 
        _this.setData({ 
          screenHeight: res.windowHeight, 
          screenWidth: res.windowWidth, 
        }); 
      } 
    }); 
 
  }, 
  ballMoveEvent: function(e) { 
    var touchs = e.touches[0]; 
    var pageX = touchs.pageX; 
    console.log('宽度 '+this.data.screenWidth) 
    console.log('pageX: ' + pageX); 
    //这里用right和bottom.所以需要将pageX pageY转换  
    var x = this.data.screenWidth/2 - pageX-20; 
    if(this.data.screenWidth>385){ 
      if(x>42){x=42;} 
    }else{ 
      if(x>32){x=32;} 
    } 
    if(x<0){x=0;} 
    console.log('x:' + x) 
    this.setData({ 
      ballleft: -x 
    }); 
  } 
})

   这几天一直在研究图片裁剪,思路是有,可是却遇到各种问题。可怜编程不易啊。

想了好久,决定还是简单开始吧。如果大家有更好的方式或是其他想法,欢迎提出,一起讨论。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
javascript 中关于array的常用方法详解
May 05 #Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 #Javascript
Angular中实现树形结构视图实例代码
May 05 #Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 #Javascript
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 #Javascript
js实现倒计时关键代码
May 05 #Javascript
You might like
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php微信公众平台开发类实例
2015/04/01 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
教师见习期自我鉴定
2014/04/28 职场文书
给校长的建议书300字
2014/05/16 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
学雷锋倡议书
2015/01/19 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书