注：此篇文章跟我寫的原生小程序所需素材還有數(shù)據(jù)是一致的，所以這邊就不在重復(fù)寫了，只寫主要的布局以及邏輯實(shí)現(xiàn)。

 <div class="container">
    <div class="table-container">
      <div class="table-content" id="dish_bg">
        <div class="table-list">
          <div
            class="table-item"
            v-for="(item, index) in prizeList"
            :key="index"
          >
            <div
              class="table-item-text"
              :style="`-webkit-transform: rotate(${item.turn});transform: rotate(${item.turn})`"
            >
              <div class="title">{{ item.title || "" }}</div>
              <div class="award">{{ item.award || "" }}</div>
              <img class="awardImg" :src="item.icon || ''" />
            </div>
          </div>
        </div>
      </div>
      <div @click="getLottery" class="table-btn"></div>
      <!-- <view wx:else class="table-btn1"></view> -->
    </div>
  </div>

rotate:0,
runDegs: 0,
prizeList: [
            {
                id: "1678684429869957122",
                title: '一等獎(jiǎng)',
                name: '純金50G金元寶',
                icon: 'xxx'
            },
            {
                id: "1678684592919330818",
                title: '二等獎(jiǎng)',
                name: '0.58現(xiàn)金紅包',
                icon: 'xxx'
            },
            {
                id: "1678684695847550977",
                // title:'三等獎(jiǎng)',
                title: '更多好禮',
                icon: 'xxx'
            },
            {
                id: "1678684847689744385",
                title: '四等獎(jiǎng)',
                name: '華為運(yùn)動手環(huán)',
                icon: 'xxx'
            },
            {
                id: "1678686592151109634",
                title: '五等獎(jiǎng)',
                name: '1.18現(xiàn)金紅包',
                icon: 'xxx'
            },
            {
                id: "1678686724460429314",
                title: '特等獎(jiǎng)',
                name: '京東優(yōu)惠券',
                icon: 'xxx'
            },
            {
                id: "1678686818400256002",
                title: '六等獎(jiǎng)',
                name: '0.18現(xiàn)金紅包',
                icon: 'xxx'
            }
        ]

 mounted() {
    var awardsConfig = this.prizeList,
      len = awardsConfig.length,
      awardsList = [];
    var turnNum = (1 / awardsConfig.length) * 360; // 文字旋轉(zhuǎn) turn 值
    for (var i = 0; i < len; i++) {
      // 獎(jiǎng)項(xiàng)列表
      awardsList.push({
        ...awardsConfig[i],
        // turn: i * turnNum + 'turn',  // 文字旋轉(zhuǎn)turn 值
        turn: i * turnNum + "deg", // 文字旋轉(zhuǎn)turn 值
        turn1:i*turnNum,
        lineTurn: i * turnNum + turnNum / 2 + "turn", // 線條旋轉(zhuǎn)turn 值
        award: awardsConfig[i].name.split("|")[0] || "", // 文字
        title: awardsConfig[i].name.split("|")[1] || "",
        icon: awardsConfig[i].icon,
      });
    }
    this.prizeList = awardsList;
  },

 getLottery() {
      const { prizeList } = this;
       var runNum = 8
      var awardIndex = prizeList.findIndex((item) => {
        if (item.prizeId === "1681140439781818369") {
          return true;
        }
      });
      let runDegs = this.runDegs || 0
      runDegs = runDegs + (360 - runDegs % 360) + (360 * runNum - awardIndex * (360 / prizeList.length))
      var dish_bg = document.getElementById("dish_bg");
      dish_bg.style.transform = "rotate(" + runDegs + "deg)";
      dish_bg.style.transition = "transform 2s ease-in-out";
      setTimeout(()=>{
        alert(prizeList[awardIndex].award)
      },2500)
    },

最后成品圖

image.png