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

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

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
    });
  }
})

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

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

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

赞 (0)

相关推荐

  • 微信小程序 图片宽度自适应的实现

     微信小程序 图片宽度自适应的实现 实例代码: wxml 代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="image&

  • 微信小程序图片选择、上传到服务器、预览（PHP）实现实例

    微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序选择图片和放大预览图片功能

    微信小程序选择图片和放大预览图片功能

    视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null }, 首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来. bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, c

  • 微信小程序 图片上传实例详解

    微信小程序 图片上传实例详解

    一.了解wx.chooseImage(OBJECT) 二.代码编程 在pages文件里面创建uploadimg文件夹 1.编写页面结构:uploadimg.wxml <view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">获取图片</button> <image

  • 微信小程序 图片绝对定位(背景图片)

    微信小程序 图片绝对定位 前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的

  • 微信小程序 图片加载（本地，网路）实例详解

    微信小程序 图片加载（本地，网路）实例详解

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.

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

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

    微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

  • 原生微信小程序开发中 redux 的使用详解

    原生微信小程序开发中 redux 的使用详解

    前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改.但是小程序页面直接的数据通信方式十分的简单.通常情况需要自己维护一个全局的对象来存放共有数据.但是,简单的维护一个共有数据实体,会随着业务逻辑的不断复杂化而变的过分庞大,并且数据的修改往往无法很好的溯源.加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段,往往需要在页面和对应的数据实体中同时都维护一份相同的数据,操作十分的不方便. 之前使用过Taro以react+redux的结构来开发微信小程序,依托redux整体上可以解

  • 微信小程序 获取二维码实例详解

     微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

  • 微信小程序常用视图容器组件使用详解

    微信小程序常用视图容器组件使用详解

    目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述 组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称 属性="值">内容<

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序富文本渲染引擎的详解

    微信小程序富文本渲染引擎的详解 步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称

  • 微信小程序数据存储与取值详解

    微信小程序数据存储与取值详解

    在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值. 比如: 在A页面input输入框,输入电话号码,点击添加.需要在B页面电话区域中,显示刚刚输入的电话号码. 因为这是两个页面,就需要先存储,再取值.微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容. 思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮

  • 微信小程序和百度的语音识别接口详解

    介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 windows 10 vs code 1.20.1 微信小程序开发工具 1.02.1802270 花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序 考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面) 文件目录 页面 index.wxml

  • 微信小程序全局配置以及页面配置详解

    微信小程序全局配置以及页面配置详解

    目录 全局配置 全局配置文件及常用配置项 全局配置—window 小程序窗口组成部分 了解window节点常用的配置项 设置导航栏的标题 设置导航栏的背景色 设置导航栏的标题颜色 全局开启下拉刷新功能 设置下拉刷新时窗口的背景色 设置下拉刷新时loading的样式 设置上拉触底的距离 全局配置—tabbar 什么是tabbar tabbar的6个组成部分 tabbar节点的配置项 每个tab项的配置选项 页面配置 页面配置文件的作用 页面配置和全局配置的关系 页面配置中常用的配置项 小结 全局配

  • 微信小程序网络数据请求的实现详解

    微信小程序网络数据请求的实现详解

    目录 一.限制 二.配置服务器合法域名 三.发起请求 GET请求 POST请求 二者区别 四. 跳过requst合法域名校验 五.关于跨域和Ajax的说明 番外-GET与POST二者的通俗化解释 一.限制 出于安全性考虑,小程序官方对数据接口的请求做出了如下两点限制: 只能请求HTTPS类型的接口 必须先将接口的域名添加到信任列表中 二.配置服务器合法域名 配置步骤: 登录微信小程序管理后台 链接 点击开发 开发管理 开发设置 服务器域名 点击右上角修改requst合法域名 注意事项: 域名只支

随机推荐