uni-app实现点击div就添加背景图片

要实现点击 div 就添加背景图片，可以通过以下步骤实现：

1. 在 div 中添加一个点击事件，可以使用 v-on:click 或 @click 绑定事件。

2. 在事件处理函数中，获取需要设置背景图片的 div 元素，可以使用 $refs 属性获取。

3. 使用样式绑定的方式，将背景图片设置为 div 元素的背景图片。

下面是一个示例代码：

<template>
  <div ref="myDiv" @click="addBackgroundImage"></div>
</template>

<script>
export default {
  methods: {
    addBackgroundImage() {
      const myDiv = this.$refs.myDiv;
      myDiv.style.backgroundImage = "url('/images/background.jpg')";
    },
  },
};
</script>

<style>
.my-div {
  width: 200px;
  height: 200px;
}
</style>

在上面的代码中，myDiv 变量获取了 div 元素，然后设置了其背景图片为 /images/background.jpg。你可以根据实际需求，修改代码中的图片路径和样式。

相关问题

uni-app实现背景遮罩不能触碰

可以通过在背景遮罩上添加一个阻止触摸事件的 div 元素来实现。具体步骤如下：

1. 在页面中添加一个背景遮罩元素，并设置其 z-index 值比其他元素小，以覆盖整个页面。

2. 在背景遮罩元素上添加一个绝对定位的 div 元素，并设置其宽高为 100%，并设置 z-index 值比背景遮罩元素大。

3. 在 div 元素上添加一个阻止触摸事件的 touchstart 或 touchmove 事件，代码如下：

document.querySelector('.mask .disable-touch').addEventListener('touchstart', function(e) {
  e.preventDefault();
}, {passive: false});

document.querySelector('.mask .disable-touch').addEventListener('touchmove', function(e) {
  e.preventDefault();
}, {passive: false});

这样，当用户触摸背景遮罩时，所有事件都会被阻止，从而实现了背景遮罩不能触碰的效果。

uni-app实现星级评价

要在uni-app中实现星级评价，你可以使用uni-app自带的组件或者自定义组件来实现。以下是一种常见的实现方式：

1. 创建一个星级评价的组件，可以命名为StarRating.vue。

2. 在StarRating.vue中，使用`<view>`或者`<div>`标签来布局星星图标，并设置合适的样式和大小。

3. 在StarRating.vue中，使用`for`循环来渲染星星图标，根据评价的分数来判断是否高亮显示星星。可以使用`v-for`指令来循环渲染星星图标，如：

<template>
  <view>
    <view v-for="index in totalStars" :key="index" @click="selectStar(index)">
      <image :src="index <= currentStar ? 'active_star_icon.png' : 'inactive_star_icon.png'" />
    </view>
  </view>
</template>

4. 在StarRating.vue中，定义一个`currentStar`变量来表示当前选中的星星数。初始值可以根据需求设置，默认为0。

5. 在StarRating.vue中，定义一个`selectStar`方法来处理点击事件，根据点击的星星数来更新`currentStar`的值。例如：

<script>
export default {
  data() {
    return {
      totalStars: 5, // 总共的星星数
      currentStar: 0 // 当前选中的星星数
    };
  },
  methods: {
    selectStar(star) {
      this.currentStar = star;
    }
  }
};
</script>

6. 将StarRating组件引入到需要使用星级评价的页面中，使用`<star-rating />`标签来调用。如：

<template>
  <view>
    <star-rating></star-rating>
  </view>
</template>

<script>
import StarRating from '@/components/StarRating.vue';

export default {
  components: {
    StarRating
  }
};
</script>

通过以上步骤，你就可以在uni-app中实现星级评价功能了。根据需要，你还可以添加其他样式和交互效果来美化和增强用户体验。