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

已于 2022-07-09 13:49:23 修改
阅读量2.8k 收藏 9
点赞数
文章标签： 微信小程序 小程序
于 2022-07-09 13:35:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48046110/article/details/125692364
版权

实现前提要景：

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轴的长度  即Width
    Ycenter : 0,//  进来会计算 表格的Y轴的长度  即 Height
    animation:{}

  },
  methods :{
    // 双指缩放  监听双指触压屏幕事件
    touchMove(e) {
      const touches = e.touches   //  touches 数组 当双指的时候 该数组有两个对象 
      // pageX  pageY 为当前手指距X轴 Y轴的距离
      const { pageX: onePageX, pageY: onePageY } = touches[0]
      // distance 双指之间直线距离  第一次进入页面  默认为0
      const {scale, distance: oldDistance,} = this.data

      if (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.data
      if(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 : newScale
          this.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() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

})
A-linWeb
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
微信小程序开发：实现数据可视化与报表
吃不胖.
08-10 1720
我们可以在GitHub上找到一些比较流行的微信小程序组件库，然后选择一个适合自己需求的组件库进行使用。我们可以在GitHub上找到一些比较流行的微信小程序组件库，然后选择一个适合自己需求的组件库进行使用。在数据可视化组件库引入完成后，我们需要在页面或者组件文件中使用组件进行数据可视化展示。需要注意的是，不同的组件库配置稍有不同，需要根据具体的情况进行相应的修改。在报表组件库引入完成后，我们需要在页面或者组件文件中使用组件进行报表展示。在微信小程序中引入数据可视化组件库需要在相应的页面或者组件文件中引入。
小白学习微信小程序的数据可视化和图表展示
最新发布
吃不胖.
05-28 304
无论是使用canvas绘制图表，还是使用第三方图表库，只要掌握了相应的API和使用方法，就可以实现各种复杂的图表展示效果。上述代码中，通过引入ECharts图表库的代码，并在页面的data中定义一个ec变量，将ECharts的初始化函数赋值给ec变量。首先，在小程序项目中引入ECharts图表库的代码，可以通过npm install命令安装，或者直接下载ECharts图表库的源代码并拷贝到小程序项目中。三、图表展示 在小程序中展示图表有多种方式，可以使用canvas绘制图表，也可以使用第三方图表库来实现。
微信小程序实现简易table表格
10-17
主要为大家详细介绍了微信小程序实现简易table表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序记账报表小程序
卓力的博客
05-14 1144
源码下载地址链接：https://pan.baidu.com/s/1ZVFeGVo5I3A1DQiXazMLXg 提取码：ti1y
微信小程序中实现双指缩放功能
weixin_49628108的博客
03-22 1556
微信小程序中实现的双指缩放功能
微信小程序图表demo
01-10
柱状图、雷达图，饼图，等统计分析 可以运行的demo
微信小程序绘制表格界面
u014388322的专栏
07-05 4020
使用这种方式绘制的表格在开发者工具显示的是没有问题的，以及在Android真机运行也没有问题；但是在ios真机上运行不显示表格界面信息；// 表格内容 这里只能使用 数组套数组格式。th: ["时间", "得分"],-- 表格标题 -->-- 表格内容 -->
微信小程序实现的绘制table表格功能示例
01-19
本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下： 表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: ...
微信小程序canvas实现文字缩放
01-12
这篇内容将深入讲解如何在微信小程序的canvas环境中实现文字的缩放功能。 首先，我们要理解微信小程序中的canvas API。在小程序中，我们可以使用`wx.createCanvasContext`方法来获取canvas的绘图上下文对象，这个...
微信小程序实现图片双滑缩放大小
03-29
在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码：  js ： Page({ data: { touch: { distance: 0, scale: 1, baseWidth: null, baseHeight: null, ...
微信小程序自定义组件实现图片单指拖动双指缩放效果
03-18
总结一下，微信小程序自定义组件实现图片单指拖动双指缩放效果主要涉及以下几个关键技术点： 1. 自定义组件的创建与使用，包括`wxml`、`wxss`、`js`和`json`文件的编写。 2. 事件监听和处理，特别是`touchstart`、`...
微信小程序报表wxcharts的使用
01-22
简单 使用
微信小程序开发表格demo
03-08
小程序开发表格demo，### wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
微信小程序实战篇：基于wxcharts.js绘制移动报表
QDY5945的博客
10-06 584
前言 微信小程序图表插件（wx-charts）是基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个。...
微信小程序动态生成表单来啦！你再也不需要手写表单了！
分享互联网的有趣知识~
11-18 3185
由于我们在小程序上涉及到数据采集业务，需要经常使用表单，微信小程序的表单使用起来非常麻烦，数据和表单是分离的，每个输入框都需要做数据处理才能实现响应式数据，所以我开发了dc-vant-form，针对原生微信小程序+vant组件构建的自定义表单，开发者可以通过表单配置项来快速生成表单。
微信小程序表格组件(锁头、锁列、样式、字体颜色等)
小风才子的博客
03-15 2649
实现微信小程序的锁头所列表格，并加入样式特性
微信小程序实现一个简单的表格
weixin_30321709的博客
07-12 1150
wxml<view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view class="th ">日期&lt...
微信小程序实现图片的双指缩放
06-13
要实现微信小程序中图片的双指缩放，可以使用小程序自带的 `<canvas>` 组件。具体步骤如下： 1. 在 WXML 文件中添加 `<canvas>` 组件，并设置宽高和 ID： ```html <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在 JS 文件中获取 `<canvas>` 组件的上下文，并加载图片： ```javascript const ctx = wx.createCanvasContext('myCanvas'); const img = new Image(); img.src = '图片地址'; img.onload = function () { ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); } ``` 3. 监听 `<canvas>` 组件的 touch 事件，实现双指缩放： ```javascript let distance = 0; // 初始距离 let scale = 1; // 初始缩放比例 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true, }).exec((res) => { const canvas = res[0].node; // 获取 canvas 节点 const canvasWidth = res[0].width; // 获取 canvas 宽度 const canvasHeight = res[0].height; // 获取 canvas 高度 canvas.addEventListener('touchstart', (e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].clientX; const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX; const y2 = e.touches[1].clientY; distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算初始距离 } }); canvas.addEventListener('touchmove', (e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].clientX; const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX; const y2 = e.touches[1].clientY; const newDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算新距离 const delta = newDistance - distance; // 计算距离差 scale += delta / 100; // 根据距离差更新缩放比例 distance = newDistance; // 更新距离 ctx.drawImage(img, 0, 0, canvasWidth * scale, canvasHeight * scale); // 根据新的缩放比例绘制图片 ctx.draw(); } }); }); ``` 在 touchstart 事件中记录双指触摸的初始距离，然后在 touchmove 事件中根据双指移动的距离差更新缩放比例，并重新绘制图片。最后调用 `ctx.draw()` 方法将画布内容绘制到屏幕上。 需要注意的是，在 touchmove 事件中需要使用 `ctx.drawImage()` 方法重新绘制图片，并传入新的宽高参数，这里的宽高需要根据当前的缩放比例计算得出。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值