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


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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
浅析vue深复制
Jan 29 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
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
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
javascript 精粹笔记
2010/05/09 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Keras搭建自编码器操作
2020/07/03 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
英国网上花店:Bunches
2016/11/29 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
英文简历中的自我评价用语
2013/12/09 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
禁毒宣传标语
2014/06/19 职场文书
小班上学期个人总结
2015/02/12 职场文书
三好学生竞选稿
2015/11/21 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android