专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
在开发中,有时会遇到像App中的手势那样的效果,那么小程序要做出类似的效果,需要怎么开发?
wxml部分:
<view class="touch-container"> <view class="msg">{{msg}}</view> <image class="img" src="{{src}}" style="width: {{width}}rpx; height: {{height}}rpx; left: {{left}}rpx; top: {{top}}rpx; transform: translate(-50%, -50%) scale({{ scale }}) rotate({{ rotate }}deg);" bindload="bindload" catchtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend" ></image> </view>
wxss部分:
page { width: 100%; height: 100%; background: #ffffff; } .touch-container { width: 100%; height: 100%; padding-top: 0.1px; } .msg { width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 30rpx; color: #666666; } .img { position: absolute; width: 690rpx; height: 300rpx; transform-origin: center center; }
js部分:
var canOnePointMove = false var onePoint = { x: 0, y: 0 } var twoPoint = { x1: 0, y1: 0, x2: 0, y2: 0 } Page({ data: { msg: '', src: 'http://img01.taopic.com/150508/318763-15050PU9398.jpg', width: 0, height: 0, left: 375, top: 600, scale: 1, rotate: 0 }, // 关闭上拉加载 onReachBottom: function() { return }, bindload: function(e) { var that = this var width = e.detail.width var height = e.detail.height if (width > 750) { height = 750 * height / width width = 750 } if (height > 1200) { width = 1200 * width / height height = 1200 } that.setData({ width: width, height: height }) }, touchstart: function(e) { var that = this if (e.touches.length < 2) { canOnePointMove = true onePoint.x = e.touches[0].pageX * 2 onePoint.y = e.touches[0].pageY * 2 }else { twoPoint.x1 = e.touches[0].pageX * 2 twoPoint.y1 = e.touches[0].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 } }, touchmove: function(e){ var that = this if (e.touches.length < 2 && canOnePointMove) { var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y that.setData({ msg: '单点移动', left: that.data.left + onePointDiffX, top: that.data.top + onePointDiffY }) onePoint.x = e.touches[0].pageX * 2 onePoint.y = e.touches[0].pageY * 2 }else if (e.touches.length > 1) { var preTwoPoint = JSON.parse(JSON.stringify(twoPoint)) twoPoint.x1 = e.touches[0].pageX * 2 twoPoint.y1 = e.touches[0].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 // 计算角度,旋转(优先) var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2))*180/Math.PI var curAngle = Math.atan((twoPoint.y1 - twoPoint.y2)/(twoPoint.x1 - twoPoint.x2))*180/Math.PI if (Math.abs(perAngle - curAngle) > 1) { that.setData({ msg: '旋转', rotate: that.data.rotate + (curAngle - perAngle) }) }else { // 计算距离,缩放 var preDistance = Math.sqrt(Math.pow((preTwoPoint.x1 - preTwoPoint.x2), 2) + Math.pow((preTwoPoint.y1 - preTwoPoint.y2), 2)) var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2)) that.setData({ msg: '缩放', scale: that.data.scale + (curDistance - preDistance) * 0.005 }) } } }, touchend: function(e) { var that = this canOnePointMove = false } })
json部分:
"navigationBarTitleText": "识别手势", "navigationBarTextStyle":"black", "navigationBarBackgroundColor": "#FFF", "disableScroll": true
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
新零售模式的发展,传统酒水行业通过开创体验式的经营模式,来提升顾客的个性化服务,已经成为实现酒类行业的热门趋势...
现阶段美容行业的运营很不规范,虽然经过一轮一轮的实践之后,有很多美容店已经了解到信息化管理系统的重要性,但在实...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...