uni-app css scoped

uni-app 中的 CSS Scoped 是一种 CSS 作用域隔离的技术，它可以确保同一个页面中不同组件的 CSS 样式不互相影响。在使用 Scoped CSS 时，可以给每个组件的 style 属性添加 scoped 关键字来实现作用域隔离，例如：

<template>
  <view class="container">
    <view class="box"></view>
  </view>
</template>

<style scoped>
.container {
  background-color: #fff;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
}
</style>

在上面的例子中，由于使用了 scoped 关键字，`.container` 和 `.box` 样式只会作用于当前组件，而不会影响到其他组件。

相关问题

uni-app实现点赞功能

1. 在pages文件夹下新建一个文件夹，取名为comment（可以自己随便取名），然后新建一个页面，取名为comment。

2. 在comment.vue中添加如下代码：

<template>
  <view class="container">
    <view class="item">
      <view class="avatar"></view>
      <view class="content">
        <view class="username">小明</view>
        <view class="message">这是一条评论</view>
      </view>
      <view class="like" @click="addLike">
        <text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
        <text class="num">{{ likeNum }}</text>
      </view>
    </view>
    <view class="item">
      <view class="avatar"></view>
      <view class="content">
        <view class="username">小红</view>
        <view class="message">这是一条评论</view>
      </view>
      <view class="like" @click="addLike">
        <text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
        <text class="num">{{ likeNum }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      likeNum: 5,
      isLiked: false,
    };
  },
  methods: {
    addLike() {
      if (!this.isLiked) {
        this.likeNum++;
        this.isLiked = true;
      } else {
        this.likeNum--;
        this.isLiked = false;
      }
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  padding: 20rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  background-color: #ddd;
  border-radius: 50%;
}

.content {
  flex: 1;
  margin-left: 10rpx;
}

.username {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.message {
  font-size: 28rpx;
}

.like {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #666;
}

.like .num {
  margin-left: 10rpx;
}

.iconfont {
  font-family: 'iconfont' !important;
}
</style>

3. 在static文件夹下新建一个iconfont文件夹，并将下载好的阿里图标库中的iconfont文件夹下的iconfont.ttf文件拷贝到static/iconfont文件夹下。

4. 在App.vue中引入阿里图标库的iconfont.css和uni.css：

<style>
@import url('~@/static/iconfont/iconfont.css');
@import url('~@/static/uni.css');
</style>

5. 在pages.json中添加如下代码：

{
  "path": "pages/comment/comment",
  "style": {
    "navigationBarTitleText": "评论",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  }
}

6. 运行项目即可看到点赞功能实现。

代码解析：

（1）在data中定义likeNum和isLiked，likeNum表示点赞数，isLiked表示当前用户是否已经点赞。初始化时将likeNum设为5（也可以根据需求自行修改），isLiked设为false。

（2）在addLike方法中根据isLiked判断当前用户是否已经点赞，如果没有点赞，点赞数加1，isLiked设为true；如果已经点赞，点赞数减1，isLiked设为false。

（3）在模板中使用:class动态绑定class，根据isLiked的值来给text标签绑定不同的iconfont类，实现点赞和取消点赞的效果。

（4）样式方面，使用了Flex布局，使布局更加美观简洁。添加了圆角、背景色等样式来优化界面。

uni-app怎么实现自适应 DPR 加载图片

在uni-app中实现自适应DPR加载图片，可以通过以下步骤实现：

1. 使用uni-app提供的$device对象获取当前设备的DPR。

2. 在需要加载图片的地方，使用v-bind指令动态绑定图片路径。

3. 在图片路径中使用“@”符号表示当前DPR，例如：“@2x”表示DPR为2时的图片路径，“@3x”表示DPR为3时的图片路径。

4. 在CSS中使用background-image属性时，同样可以使用“@”符号表示当前DPR，例如：background-image: url('bg@2x.png');

下面是一个示例代码：

<template>
  <div>
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: ''
    }
  },
  mounted() {
    const dpr = uni.$device.pixelRatio;
    this.imgUrl = `/static/img/avatar@${dpr}x.png`;
  }
}
</script>

<style scoped>
div {
  width: 100px;
  height: 100px;
  background-image: url('/static/img/bg@2x.png');
}
</style>

在上面的示例中，mounted生命周期中获取当前设备的DPR值，然后动态绑定图片路径，从而实现自适应DPR加载图片。同时，在CSS中也使用了“@”符号表示当前DPR。