uniapp魔方照片墙如何点击按钮实现随机抽出一张图片

UniApp 魔方照片墙通过JavaScript和Vue.js实现随机抽取一张图片的功能，通常会涉及到数组操作和事件监听。以下是步骤：

1. **初始化图片数组**：
在数据绑定或组件的data属性中，创建一个包含所有图片路径的数组，例如：

   data() {
     return {
       photoUrls: ['image1.jpg', 'image2.jpg', 'image3.jpg'], // 这里替换为实际的图片URLs
     }
   }

2. **定义随机选择函数**：
创建一个方法，比如`randomPickImage`，从数组中随机选取一个元素：

   methods: {
     randomPickImage() {
       const index = Math.floor(Math.random() * this.photoUrls.length);
       return this.photoUrls[index];
     },
   }

3. **添加按钮点击事件**：
在HTML模板中添加一个按钮，并设置点击事件处理器，调用上述的随机选择方法：

   <button @click="selectRandomImage">点击抽图</button>

然后在对应的JS部分处理这个事件，如：

   selectRandomImage() {
     this.currentImage = this.randomPickImage(); // 将选中的图片赋值给当前显示的图片变量
     // 更新UI展示新的图片
   }

4. **更新页面显示**：
最后，在模板中使用`v-bind:src`或计算属性动态绑定随机选中的图片到相应的img标签。