有趣的骰子弹性布局微信小程序代码

在创建一个有趣的骰子弹性布局的微信小程序中，你可以利用 Flexbox 或者 CSS Grid 等现代CSS布局技术来实现。下面是一个简单的示例，我们将创建一个包含六个面的骰子容器，每个面可以点击并显示随机数：

<!-- index.wxml -->
<view class="dice-container">
  <view class="face" wx:for="{{faces}}" wx:key="{{index}}">
    <button bindtap="rollDice">{{faceValue[index]}}</button>
  </view>
</view>

<!-- index.wxss -->
.dice-container {
  display: flex;
  justify-content: space-around;
}

.face {
  flex: 1;
  text-align: center;
}

/* 这里假设faceValue数组在data.js中预先设置好了 */
.face button {
  width: 100%;
  height: 100px;
  border-radius: 50%;
}

<!-- index.js -->
Page({
  data: {
    faces: ['1', '2', '3', '4', '5', '6'],
    faceValue: [1, 2, 3, 4, 5, 6],
  },
  
  rollDice(e) {
    const targetIndex = parseInt(e.currentTarget.dataset.index);
    this.setData({
      faceValue[targetIndex]: Math.floor(Math.random() * 6) + 1,
    });
  }
})

在这个例子中，`dice-container`使用 Flexbox 展开，并且每个 `face` 都等分空间。每次点击骰子面，JavaScript会触发 `rollDice` 函数，更新对应的随机数值。