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


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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
Use Word to Search for Files
Jun 15 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
vue穿梭框实现上下移动
Jan 29 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
将数组写入txt文件 var_export
2009/04/21 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
小学生期末自我鉴定
2014/01/19 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年公司工作总结
2014/11/22 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server