微信小程序实现随机生成元素且不重叠

weixin_61953430

于 2024-01-11 15:20:43 发布

阅读量573

点赞数 6

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_61953430/article/details/134878291

版权

本文介绍了如何使用微信小程序的JavaScript编写代码，在指定范围内随机生成元素位置并确保它们不重叠，同时处理大量元素时的性能优化，通过`loopSafeValue`防止无限循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何微信小程序实现在指定范围内随机生成元素位置且不重叠？
其实感觉这个有点像散点图➕词云图效果。
在这里插入图片描述
相关文章：

JavaScript经典面试题：判断两个矩形是否重叠

完整代码

<view class="box">
	<view 
		wx:for="{
  {tagEle}}" 
		wx:key="{
  {key}}" 
		class="item" 
		id="item{
  {index}}" 
		style="left: {
  {item.left}}px;top: {
  {item.top}}px;color: {
  {item.color}};" data-title="{
  {item.title}}" bind:tap="handleItem">
		{
  {item.title}}
	</view>
</view>

.box {
	width: 100vw;
	height: 400rpx;
	position: relative;
	margin: 0 auto;
	border: 10rpx solid red;
	box-sizing: border-box
}

.item {
	padding: 10rpx 20rpx 30rpx;
	width: fit-content;
	background: #fff url('https://marketplace.canva.cn/v0T20/MAD3iSv0T20/2/tl/canva-%E8%B6%85%E7%BB%86%E7%BA%BF%E8%AE%BE%E8%AE%A1%E5%85%83%E7%B4%A0%E5%AF%B9%E8%AF%9D%E6%A1%86%E7%BB%86%E7%BA%BF%E8%AE%BE%E8%AE%A1-MAD3iSv0T20.png');
	background-size: 100% 100%;
	position: absolute;
	top: 50%;
	left: 50%;
}

理想状态下，如果标签个数够少，在其指定范围内有较大的随机空间，代码会不停的计算标签位置，使其不重叠，但是如果标签数量过多内容超载，在有限的空间范围内，重叠是必然的，代码计算就会会陷入死循环，所以在此利用loopSafeValue进行最大循环次数限制，如到时候还是没有计算出让它不与其他标签相叠的位置，就退出循环。


Page({
   
    /**
     * 页面的初始数据
     */
    data: {
   
        tagEle: [], // 标签云数据
    },
    elList: [],
    loopSafeValue: 1000, // 最大循环次数
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
   
        // 标签云元素数组
        let tagEle = [ {
    title: 'Web前端' }, {
    title: 'JavaScript 教程' }, {
    title: '微信小程序' }, {
    title: 'Vue3' }, {
    title: 'React' }, {
    title: 'Vue2' }, {
    title: '代码与编程' }, {
    title: 'Animation 动画'

最低0.47元/天解锁文章