小程序3D标签云

article/2025/11/11 16:06:59

微信小程序实现3D标签云
在网上查找了许多3d标签云的案列，一般都是用原生和jquery写的，然后参考
https://www.cnblogs.com/axes/p/3501424.html这篇文章
在小程序里面实现标签云，具体代码如下

wxml

// An highlighted block
<view class="tagBall"><a class="tag" wx:for="{{tagEle}}" wx:key="{{index}}" style="opacity:{{item.o}};z-index:{{item.z}};left: {{item.x}}rpx;top: {{item.y}}rpx;transform: scale({{item.s}})">{{item.title}}</a></view>

wxss

.tagBall{width: 420rpx;height: 300rpx;margin:300rpx auto;position: relative;left: 120rpx;}.tag{display: block;position: absolute;left: 0rpx;top: 0rpx;color: #000;text-decoration: none;font-size: 32rpx;font-family: "微软雅黑";font-weight: bold;}.tag:hover{border:1px solid #666;}

js

innit() {var tagEle = [{title: '被子',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '咖啡機',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '飛機',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '电脑',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '手机',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '键盘',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '奶飞机',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '桌子',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '板凳',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '杯子',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX:0,angleY:0},{title: '被子',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '咖啡機',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '飛機',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '电脑',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '手机',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '键盘',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '奶飞机',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '桌子',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '板凳',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0},{title: '杯子',x: 0,y: 0,z: 0,s: 0,o: 1,f: 15,angleX: 0,angleY: 0}]for (var i = 0; i < tagEle.length; i++) {var fallLength = 100 //圆的焦点var angleX = Math.PI / 100var angleY = Math.PI / 100var k = (2 * (i + 1) - 1) / tagEle.length - 1;//计算按圆形旋转var a = Math.acos(k);var b = a * Math.sqrt(tagEle.length * Math.PI);//计算元素x，y坐标var numx = 120 * Math.sin(a) * Math.cos(b)var numy = 120 * Math.sin(a) * Math.sin(b);var numz = 220 * Math.cos(a);// console.log(numo)//计算元素缩放大小tagEle[i].x = numx * 2tagEle[i].y = numy * 2tagEle[i].z = numztagEle[i].s = 250 / (400 - tagEle[i].z)}//动画setInterval( () =>{for (var i = 0; i < tagEle.length; i++) {var a = Math.acos(k);var numz = 240 * Math.cos(a);tagEle[i].s = 250 / (400 - tagEle[i].z)var cos = Math.cos(angleX);var sin = Math.sin(angleX);var y1 = tagEle[i].y * cos - tagEle[i].z * sin;var z1 = tagEle[i].z * cos + tagEle[i].y * sin;tagEle[i].y = y1;tagEle[i].z = z1;var cos = Math.cos(angleY);var sin = Math.sin(angleY);var x1 = tagEle[i].x * cos - tagEle[i].z * sin;var z1 = tagEle[i].z * cos + tagEle[i].x * sin;tagEle[i].x = x1;tagEle[i].z = z1;this.setData({tagEle: tagEle})}}, 100)},