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


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 相关文章推荐
中止javascript执行的方法
Feb 14 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
详解Python中的多线程编程
2015/04/09 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python默认参数调用方法解析
2020/02/09 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
心得体会范文
2014/01/04 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
治安消防安全责任书
2014/07/23 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
长城英文导游词
2015/01/30 职场文书
个人年终总结怎么写
2015/03/09 职场文书
幼儿园开学通知
2015/04/24 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
导游词之无锡古运河
2019/11/14 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers