微信小程序实现报表（表格）双指缩放功能

实现前提要景：

1.本次实现双指缩放是用css3中的scale配合translate 实现
2.小程序不支持动态改变scale的大小即使在写在行内样式中也不生效（在调试中不生效）故需借助小程序自己的API animation动画函数进行实现动态scale 和translate实现
3.zoom在其实也能实现但是在小程序调试中也不生效
4.了解小程序 touchMove 属性（双指缩放监听）
5.报表缩放时需要保持长宽不变即报表始终要占满手机屏幕（造成用户进行双指缩放感官上只是字体大小进行缩放）所以要根据缩放程度动态计算长宽以及平移距离
6.在实际的平移过程中translate的值也会乘上你的scale中的参数。
所以在对scale之后的元素通过平移来实现到达某个位置时，translate中的参数为：实际平移值/scale的倍数。
具体事例：缩放和平移的影响
7.了解小程序createSelectorQuery boundingClientRect 函数我们需要借助它记录当前报表的长宽方便后续进行缩放计算（不同的用户手机宽高不同不能写死宽高）

<view class="wx_table"  animation="{{animation}}" capture-bind:touchmove="touchMove" catch:touchend="touchEnd" style=" height:{{scaleHeight + '%'}} ;width:{{scaleWidth + '%'}}; " ><view class="table_top"><view class="table_header" style="left: {{footerScrollLeft}}px"><view class="th" style = "{{item.minWidth ? 'width:'+item.minWidth+';':'flex:1;'}}" wx:for="{{columns}}" wx:key="index">{{item.label}}</view></view></view><scroll-view class="table_center"  scroll-x scroll-y  bindscroll='handleInit' enhanced="{{true}}" bounces="{{fasle}}" lower-threshold="10" bindscrolltolower="hadlePaging"><view style="display: inline-block" class="content" wx:if="{{tableDate.length}}"><view class="tr {{index % 2 == 0 ? 'bgc' : '' }}" wx:for="{{tableDate}}" wx:for-item="date" wx:key="index"><view class="td " style = "{{column.minWidth ? 'width:'+column.minWidth+';':'flex:1;'}}"  wx:for="{{columns}}" wx:for-item="column" wx:for-index="columnIndex" wx:key="columnIndex">{{table.formaTableDate(date,column.columnKey)}}</view></view></view><view  style="display: inline-block" class="content" wx:if="{{!tableDate.length}}"><view class="tr"><view class="td " style = "width : {{column.minWidth?column.minWidth:'calc(350vmin / 7.5)'}}"  wx:for="{{columns}}" wx:for-item="column" wx:for-index="columnIndex" wx:key="columnIndex"></view></view><view class="no_content"><view>暂无记录</view></view></view></scroll-view><view class="table_bottom" wx:if="{{showFooter && tableDate.length}}"><view class="table_footer" style="left: {{footerScrollLeft}}px"><view class="td" style = "{{item.minWidth ? 'width:'+item.minWidth+';':'flex:1;'}}"  wx:for="{{columns}}" wx:key="index">{{index==0? '共' + sumArray[index] + '项': sumArray[index]}}</view></view></view>
</view><wxs module="table">module.exports = {formaTableDate: function (date,columnKey) {if(columnKey.indexOf('.')) {var key = ''columnArray = columnKey.split('.')for(var index = 0; index < columnArray.length; index++) {var element = columnArray[index];if(!key) {key = date[element]}else {key = key[element]}}return key;} else {return date[columnKey];}}}
</wxs>


// pages/template/table/table.js
Component({properties: {columns: { type: Array,},tableDate : {type: Array,},showFooter : {type: Boolean,value : true},sumArray : {type: Array,value : new Array(15).fill('--')}},data: {//  距左边的距离footerScrollLeft  : 0,scale : 1,scaleHeight : '100',scaleWidth : '100',distance : '',Xcenter : 0,  //  进来会计算 表格的X轴的长度  即WidthYcenter : 0,//  进来会计算 表格的Y轴的长度  即 Heightanimation:{}},methods :{// 双指缩放  监听双指触压屏幕事件touchMove(e) {const touches = e.touches   //  touches 数组 当双指的时候 该数组有两个对象 // pageX  pageY 为当前手指距X轴 Y轴的距离const { pageX: onePageX, pageY: onePageY } = touches[0]// distance 双指之间直线距离  第一次进入页面  默认为0const {scale, distance: oldDistance,} = this.dataif (touches.length === 2) { const { pageX: twoPageX, pageY: twoPageY } = touches[1]// distance  勾股定理 计算双指之间直线距离let distance = Math.sqrt((twoPageX - onePageX) ** 2 + (twoPageY - onePageY) ** 2)this.data.distance = distance// 通过双指直线距离的变化 对缩放倍数进行计算let NewScale = (scale * (distance / (oldDistance || distance)))this.handleAlintest(NewScale)}},// 双指离开touchEnd(e) {this.setData({distance : 0})},handleAlintest(newScale) {const {scale,Xcenter,Ycenter} = this.dataif(newScale) {//  判断表格缩放  表格缩放scale  默认是根据中心焦点进行缩放 所以我们需要平移还原原来位置 平移也是根据中心焦点平移//  当scale 和平移同时用的时候 平移过程中translate的值会乘上scale中的参数 所以translate中的参数为：实际平移值/scale的倍数// 不仅要回到初始位置 还需要将X  Y 长度扩大  即原点也会进行变更  所以translate中的参数为：实际平移值/scale的倍数/scale的倍数// 缩if (scale >= newScale ) {let alin = newScale < 0.4 ? 0.4 : newScale// 缩放的同时 对其进行平移this.animation.scale(alin).translate(- (((Xcenter / 2 - (Xcenter * alin /2)) / alin)) / alin,- (((Ycenter / 2 - (Ycenter * alin /2) )/ alin))  / alin).step()this.setData({  animation: this.animation.export() ,scale: alin,  //输出动画  scaleHeight: (1 / alin ) * 100,scaleWidth:(1 / alin) * 100,})} else {  // 放let alin = newScale > 2 ? 2 : newScalethis.animation.scale(alin).translate(- (((Xcenter / 2 - (Xcenter * alin /2)) / alin)) / alin,- (((Ycenter / 2 - (Ycenter * alin /2) )/ alin))  / alin).step()this.setData({scale: alin,animation: this.animation.export() ,scale: alin,  //输出动画  scaleHeight: (1 / alin ) * 100,scaleWidth:(1 / alin) * 100,})}}},//  调整表头表尾的位置handleInit(e) {this.setData({footerScrollLeft : -(e.detail.scrollLeft)})},hadlePaging(e) {if(e.detail.direction == 'bottom') {this.triggerEvent('parent')}}},lifetimes: {attached: function() {  },ready() {this.animation = wx.createAnimation({timingFunction:'step-start',duration : 0})let query = this.createSelectorQuery();console.log(query);let that = this;query.select('.wx_table').boundingClientRect(function (rect) {console.log(rect,'====>');that.setData({Xcenter : rect.width ,Ycenter : rect.height,})that.handleAlintest(.5)}).exec();},detached: function() {// 在组件实例被从页面节点树移除时执行},},})

微信小程序实现报表（表格）双指缩放功能相关推荐

微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...
微信小程序开发（2） - 微信小程序实现拍照和录像拍摄功能方法
微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...
wifi 小程序透传_微信小程序实现的一键连接wifi功能示例
本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...
【微信小程序/实现】实现留言墙功能页面
[微信小程序/实现]实现留言墙功能一.需求分析二.功能设计三.页面设计四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...
微信小程序云开发CMS中WebHook功能的使用方法
微信小程序云开发CMS中WebHook功能的使用方法官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
php 微信小程序获取手机号_实例讲解微信小程序获取手机号授权用户登录功能...
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写.本文主要给大家分享微信小程序获取手机号授权用户登录功能,需要的朋友参考下吧, ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...

微信小程序实现报表（表格）双指缩放功能

实现前提要景：

微信小程序实现报表（表格）双指缩放功能相关推荐

最新文章

热门文章

微信小程序 实现报表（表格）双指缩放功能

实现前提要景：

微信小程序 实现报表（表格）双指缩放功能相关推荐

最新文章

热门文章

微信小程序实现报表（表格）双指缩放功能

微信小程序实现报表（表格）双指缩放功能相关推荐