写uniapp时遇到的问题

Question

我在写uniapp的时候，在做可以滚动的词条时，遇到了这样一个问题，在h5页面上，这个词条是这样的

但是在我打包发在手机上面时候，却成这样了。

我使用的是vue2的写法

<template>
<view>
    <view class="zhanwei">
    </view>
    <view>
    <section class="cloud-bed">
        <view class="cloud-box">
          <span
            v-for="(item, index) in dataList"
            :key="index"
            @click="getDataInfo(item)"
            :style="{color:item.color,background:item.bgColor}"
          >
            {{ item.name }}
          </span>
        </view>
      </section>
      </view>
</view>
</template>
<script>
    

    export default {
        name: "word-cloud",
        data() {
          return {
            timer: 50, // 球体转动速率
            radius: 0, // 词云球体面积大小
            dtr: Math.PI/180, //鼠标滑过球体转动速度
            active: false, // 默认加载是否开启转动
            lasta: 0, // 上下转动
            lastb: 0.5, // 左右转动
            distr: true,
            tspeed: 0, // 鼠标移动上去时球体转动
            mouseX: 0,
            mouseY: 0,
            tagAttrList: [],
            tagContent: null,
            cloudContent: null,
            sinA: '',
            cosA: '',
            sinB: '',
            cosB: '',
            sinC: '',
            cosC: '',
            dataList: [
              {
                name: '一定要找到工作啊',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '渐入佳境',
                value: '8',
                bgColor:'rgb(66, 105, 245,0.12)',
                color:'#4269f5',
              },
              {
                name: '加油',
                value: '9',
                bgColor:'rgb(184, 107, 215,0.12)',
                color:'#b86bd7',
              },
              {
                name: '道阻且长',
                value: '3',
                bgColor:'rgb(243, 84, 83,0.12)',
                color:'#f35453',
              },
              {
                name: '制定的计划要坚持做',
                value: '6',
                bgColor:'rgb(250, 116, 20,0.12)',
                color:'#FA7414',
              },
              {
                name: '悟已往之不谏，知来者之可追',
                value: '10',
                bgColor:'rgb(255, 171, 30,0.12)',
                color:'#FFAB1E',
              },
              {
                name: 'MAN ！just do it！',
                value: '2',
                bgColor:'rgb(136, 104, 217,0.12)',
                color:'#8868D9',
              },
              {
                name: '未来可期',
                value: '5',
                bgColor:'rgb(42, 184, 230,0.12)',
                color:'#2AB8E6',
              },
              {
                name: '导航性',
                value: '7',
                bgColor:'rgb(117, 133, 162,0.12)',
                color:'#7585A2',
              },
              {
                name: '生活不止有眼前的苟且，还有诗和远方',
                value: '1',
                bgColor:'rgb(184, 107, 215,0.12)',
                color:'#39c1cf',
              },
              {
                name: '强中自有强中手，一山更比一山高',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#7585A2',
              },
              {
                name: '你本就是高山而非草芥 你应当去看看人生最好的风景',
                value: '1',
                bgColor:'rgb(255, 171, 30,0.12)',
                color:'#39c1cf',
              },
              {
                name: '诸子长大成人，仍以当军人，为父报仇，为国尽忠为宜。终有一日，我们的旗帜终将飘扬在富士山头，让我子孙后代，再不受此屈辱',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '做好自己的事，别躺！',
                value: '1',
                bgColor:'rgb(136, 104, 217,0.12)',
                color:'#39c1cf',
              },
              {
                name: '希望能顺利考上研',
                value: '1',
                bgColor:'rgb(146, 120, 17,0.12)',
                color:'#7585A2',
              },
              {
                name: '加油，你永远是最棒哒！',
                value: '1',
                bgColor:'rgb(57, 13, 7,0.12)',
                color:'#39c1cf',
              },
              {
                name: '人生百年未小半，向前向上向圆满',
                value: '1',
                bgColor:'rgb(80, 13, 87,0.92)',
                color:'#39c1cf',
              },
              {
                name: '不忘初心，不负青春。',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '尽吾志也而不能至者，可以无悔矣',
                value: '1',
                bgColor:'rgb(12, 93, 27,0.12)',
                color:'#39c1cf',
              },
              {
                name: '你当像鸟飞往你的山',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '愿君一帆风顺，多平安',
                value: '1',
                bgColor:'rgb(250, 116, 20,0.12)',
                color:'#39c1cf',
              },
              {
                name: '对未来的真正慷慨是把一切都献给现在',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '喧闹任其喧闹，自由我自为之，我自风情万种，与世无争。',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '多看代码吧，好好减肥，好好睡觉，少看视频',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '有能力分辨外界的声音，愿意从小事中感受美好，在不乐意里发现快乐，慢慢积攒勇气',
                value: '1',
                bgColor:'rgb(136, 104, 217,0.12)',
                color:'#39c1cf',
              },
              {
                name: '希望未来的自己能过幸福简单的生活，能有一个小家，不一定有伴侣，可以养小猫小狗，能常回家看父母，能和朋友常聚',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '你今天所有的花费都会在未来出现在你身边',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#FFAB1E',
              },
              {
                name: '多看代码吧，好好减肥，好好睡觉，少看视频',
                value: '1',
                bgColor:'rgb(243, 84, 83,0.12)',
                color:'#39c1cf',
              },
              {
                name: '希望未来的你不矛盾，有目标有方向有自由',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#37f67f',
              },
              {
                name: '希望你永远不要迷失自己理想',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              
              {
                name: '希望未来的你不矛盾，有目标有方向有自由',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#FFAB1E',
              },
              
              {
                name: '关关难过关关过，前路漫漫亦灿烂',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#7585A2',
              },
              {
                name: '成为富婆 财富自由',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '落花散尽人憔悴，廿年功利生华发',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '不沉湎于过往，不计较已失，不拘泥于来路，不妄想将来。',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#FFAB1E',
              },
              {
                name: '希望你永远有着年轻人该有的棱角，你的成功不会是偶然的，继续做个理性但不偏激的人吧',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '你可能回想起来，你现在的选择结果不是最好的答案，但是他是你当下的最优解，别管过去，放眼未来加油！！',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '送给未来的自己一句话，你生而有翼，为何甘愿匍匐前行，行如虫蚁',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '浮光三世，犹有半载烟火。星河流转，长途唯有无穷',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '浮光三世，犹有半载烟火。星河流转，长途唯有无穷',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#FFAB1E',
              },
              {
                name: '浮光三世，犹有半载烟火。星河流转，长途唯有无穷',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '希望两年后的自己可以完成我高中时的梦想，带自己的父母参观自己的大学',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#FFAB1E',
              },
              {
                name: '不要让明天成为遗憾，努力争取，把握现在',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#39c1cf',
              },
              {
                name: '你要好好爱自己，不要把自己困在杂乱无用，只能消耗你的人际关系里。',
                value: '1',
                bgColor:'rgb(57, 193, 207,0.12)',
                color:'#FFAB1E',
              },
            ],
            lastRecord: ''
          }
        },
        
        mounted () {
          this.$nextTick(() => {
            this.radius = document.querySelector('.cloud-box').offsetWidth / 2
            this.initWordCloud()
          })
        },
        beforeDestroy () {
          clearInterval(this.timer)
        },
        methods:{
          // 获取点击文本信息
          getDataInfo (item) {
            console.log(item, 'item')
          },
          initWordCloud () {
            this.cloudContent = document.querySelector('.cloud-box');
            this.tagContent = this.cloudContent.getElementsByTagName('span');
            for (let i = 0; i < this.tagContent.length; i++) {
              let tagObj = {};
              tagObj.offsetWidth = this.tagContent[i].offsetWidth;
              tagObj.offsetHeight = this.tagContent[i].offsetHeight;
              this.tagAttrList.push(tagObj);
            }
            this.sineCosine(0, 0, 0);
            this.positionAll();
            this.cloudContent.onmouseover = () => {
              this.active=true;
            };
            this.cloudContent.onmouseout = () => {
              this.active=false;
            };
            this.cloudContent.onmousemove = (ev) => {
              let oEvent = window.event || ev;
              this.mouseX = oEvent.clientX - (this.cloudContent.offsetLeft + this.cloudContent.offsetWidth/2);
              this.mouseY = oEvent.clientY - (this.cloudContent.offsetTop + this.cloudContent.offsetHeight/2);
              this.mouseX/= 5;
              this.mouseY/= 5;
            };
              setInterval(this.update, this.timer);
          },
          positionAll () {
            let phi = 0;
            let theta = 0;
            let max = this.tagAttrList.length;
            let aTmp = [];
            let oFragment = document.createDocumentFragment();
            //随机排序
            for (let i=0; i < this.tagContent.length; i++) {
              aTmp.push(this.tagContent[i]);
            }
            aTmp.sort(() => {
              return Math.random() < 0.5 ? 1 : -1;
            });
            for (let i = 0; i < aTmp.length; i++) {
              oFragment.appendChild(aTmp[i]);
            }
            this.cloudContent.appendChild(oFragment);
            for(let i = 1; i < max + 1; i++){
              if (this.distr) {
                phi = Math.acos(-1 + (2 * i - 1) / max);
                theta = Math.sqrt(max * Math.PI) * phi;
              } else {
                phi = Math.random() * (Math.PI);
                theta = Math.random() * (2 * Math.PI);
              }
              //坐标变换
              this.tagAttrList[i-1].cx = this.radius * Math.cos(theta) * Math.sin(phi);
              this.tagAttrList[i-1].cy = this.radius * Math.sin(theta) * Math.sin(phi);
              this.tagAttrList[i-1].cz = this.radius * Math.cos(phi);
              this.tagContent[i-1].style.left = this.tagAttrList[i-1].cx + this.cloudContent.offsetWidth / 2 - this.tagAttrList[i-1].offsetWidth / 2 + 'px';
              this.tagContent[i-1].style.top = this.tagAttrList[i-1].cy + this.cloudContent.offsetHeight / 2 - this.tagAttrList[i-1].offsetHeight / 2 + 'px';
            }
          },
          update () {
            let angleBasicA;
            let angleBasicB;
     
            if (this.active) {
              angleBasicA = (-Math.min(Math.max(-this.mouseY, -200 ), 200) / this.radius) * this.tspeed;
              angleBasicB = (Math.min(Math.max(-this.mouseX, -200 ), 200) / this.radius) * this.tspeed;
            } else {
              angleBasicA = this.lasta * 0.98;
              angleBasicB = this.lastb * 0.98;
            }
            this.sineCosine(angleBasicA, angleBasicB, 0);
            for(let j = 0; j < this.tagAttrList.length; j++) {
              let rx1 = this.tagAttrList[j].cx;
              let ry1 = this.tagAttrList[j].cy * this.cosA + this.tagAttrList[j].cz * (-this.sinA);
              let rz1 = this.tagAttrList[j].cy * this.sinA + this.tagAttrList[j].cz * this.cosA;
     
              let rx2 = rx1 * this.cosB + rz1 * this.sinB;
              let ry2 = ry1;
              let rz2 = rx1 * (-this.sinB) + rz1 * this.cosB;
     
              let rx3 = rx2 * this.cosC + ry2 * (-this.sinC);
              let ry3 = rx2 * this.sinC + ry2 * this.cosC;
              let rz3 = rz2;
              this.tagAttrList[j].cx = rx3;
              this.tagAttrList[j].cy = ry3;
              this.tagAttrList[j].cz = rz3;
     
              let per = 350 / (350 + rz3);
              this.tagAttrList[j].x = rx3 * per - 2;
              this.tagAttrList[j].y = ry3 * per;
              this.tagAttrList[j].scale = per;
              this.tagAttrList[j].alpha = per;
              this.tagAttrList[j].alpha = (this.tagAttrList[j].alpha - 0.6) * (10/6);
            }
            this.doPosition();
            this.depthSort();
          },
          doPosition() {
            let len = this.cloudContent.offsetWidth/2;
            let height = this.cloudContent.offsetHeight/2;
            for (let i=0;i < this.tagAttrList.length;i++) {
              this.tagContent[i].style.left = this.tagAttrList[i].cx + len - this.tagAttrList[i].offsetWidth/2 + 'px';
              this.tagContent[i].style.top = this.tagAttrList[i].cy + height - this.tagAttrList[i].offsetHeight/2 + 'px';
              // this.tagContent[i].style.fontSize = Math.ceil(12 * this.tagAttrList[i].scale/2) + 8 + 'px';
              this.tagContent[i].style.fontSize = Math.ceil(12 * this.tagAttrList[i].scale/2) +2 + 'px';
              this.tagContent[i].style.filter = "alpha(opacity="+100 * this.tagAttrList[i].alpha+")";
              this.tagContent[i].style.opacity = this.tagAttrList[i].alpha;
            }
          },
          depthSort(){
            let aTmp = [];
            for (let i = 0; i < this.tagContent.length; i++) {
              aTmp.push(this.tagContent[i]);
            }
            aTmp.sort((item1, item2) => item2.cz - item1.cz);
            for (let i = 0; i < aTmp.length; i++) {
              aTmp[i].style.zIndex=i;
            }
          },
          sineCosine (a, b, c) {
            this.sinA = Math.sin(a * this.dtr);
            this.cosA = Math.cos(a * this.dtr);
            this.sinB = Math.sin(b * this.dtr);
            this.cosB = Math.cos(b * this.dtr);
            this.sinC = Math.sin(c * this.dtr);
            this.cosC = Math.cos(c * this.dtr);
          },
          

        }
      };
</script>

<style>
    .zhanwei{
        width: 100%;
        height: 400rpx;
        
    }
    
    
    
.cloud-bed {
  width: 400rpx;
  height: 400rpx;
  margin: auto;
}
.cloud-box{
    position:relative;
    margin:20rpx auto 0rpx;
    width: 100%;
    height: 100%;
    background:    #00000000;
  }
 .cloud-box span{
      position: absolute;
      padding: 3rpx 6rpx;
      top: 0rpx;
      font-weight: bold;
      text-decoration:none;
      left:0rpx;
      background-image: linear-gradient(to bottom, red, #fff);
      background-clip: text;
      color: transparent;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }    
</style>

请问我该如何去解决这个问题。

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】： 您在开发uniapp应用时遇到了一个问题，即在H5页面上可以正常滚动显示的词条，在打包到手机上后显示效果出现了问题。您希望找到原因并解决这个问题。

【图片内容】：

1. 第一张图片展示了在H5页面上词条的正常滚动效果。
2. 第二张图片展示了在手机上词条显示出现问题的效果，具体表现为词条排列和滚动显示不正常。

【问题出现原因】： 问题可能出现的原因有多种，但根据您提供的信息，可能的原因包括：

• 不同平台的CSS渲染差异，导致在手机上的布局和H5页面不一致。
• uniapp在编译到不同平台时，可能存在一些特定的样式或属性没有被正确处理。
• 可能存在一些特定于平台的CSS属性或JavaScript代码没有被适配或优化。

【问题解决方案】： 要解决这个问题，您可以尝试以下步骤：

1. 检查CSS样式：确保您的CSS样式在不同平台上都能正确渲染。可以使用媒体查询来为不同平台设置不同的样式。
2. 使用Flexbox或Grid：这些布局方式在不同平台上有更好的兼容性和适应性。
3. 条件编译：使用uniapp的条件编译功能，为不同平台编写特定的代码。
4. 审查JavaScript逻辑：确保JavaScript代码在手机上的执行逻辑与H5页面一致。

【提供代码】： 由于您的代码较长，我将提供一些可能的修改点，但请注意，这些修改可能需要您根据实际情况进行调整：

// 您的代码中可能需要添加的条件编译示例
<template>
<view v-if="isH5">
  <!-- H5平台特有的代码 -->
</view>
<view v-else>
  <!-- 其他平台的代码 -->
</view>
</template>

<script>
export default {
  name: "word-cloud",
  computed: {
    isH5() {
      return uni.getSystemInfoSync().platform === 'h5';
    }
  },
  // ... 其他代码保持不变
};
</script>

【代码运行方式】： 您需要在支持uniapp的开发环境中运行代码，比如HBuilderX。确保您的设备已经连接到开发环境，并且已经配置好了相关的编译选项。

【代码预期运行结果】： 预期结果是在H5页面和手机上都能正确显示和滚动词条，且布局和样式在不同平台上保持一致。

【推荐相关链接】：

• uniapp官方文档
• uniapp社区
• CSS Tricks - 提供了很多关于CSS布局和样式的技巧。
• MDN Web Docs - Mozilla的开发者文档，提供详细的Web技术信息。

请尝试上述建议，并根据实际情况调整代码。如果问题仍然存在，您可能需要进一步调试或寻求社区的帮助。