用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序图片拖拽

纸飞机 2018-3-6 16:11

作者:汉堡请不要欺负面条,来自授权地址 1.编写页面结构:moveimg.wxml 2.编写页面样式:moveimg.wxss.container { box-sizing:border-box; padding:1rem; } .cnt{ ...

作者:汉堡请不要欺负面条,来自

授权地址


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

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

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

  1. .container {
  2. box-sizing:border-box;
  3. padding:1rem;
  4. }
  5. .cnt{
  6. width:100%;
  7. height:15rem;
  8. border: 1px solid #ccc;
  9. position:relative;
  10. overflow: hidden;
  11. }
  12. .image-style{
  13. position: absolute;
  14. top: 0px;
  15. left:0px;
  16. height:100%;
  17. }

3.设置数据:moveimg.js

  1. var app = getApp()
  2. Page({
  3. data: {
  4. ballleft:-20,
  5. screenWidth: 0,
  6. },
  7. onLoad: function() {
  8. var _this = this;
  9. wx.getSystemInfo({
  10. success: function(res) {
  11. _this.setData({
  12. screenHeight: res.windowHeight,
  13. screenWidth: res.windowWidth,
  14. });
  15. }
  16. });
  17. },
  18. ballMoveEvent: function(e) {
  19. var touchs = e.touches[0];
  20. var pageX = touchs.pageX;
  21. console.log('宽度 '+this.data.screenWidth)
  22. console.log('pageX: ' + pageX);
  23. //这里用right和bottom.所以需要将pageX pageY转换
  24. var x = this.data.screenWidth/2 - pageX-20;
  25. if(this.data.screenWidth>385){
  26. if(x>42){x=42;}
  27. }else{
  28. if(x>32){x=32;}
  29. }
  30. if(x<0){x=0;}
  31. console.log('x:' + x)
  32. this.setData({
  33. ballleft: -x
  34. });
  35. }
  36. })

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

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏