【揭秘uni-app专题组件】从设计到实现的全面解析

本文链接：https://blog.youkuaiyun.com/Reeuse/article/details/144027432

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================

前情提要

🔺从现在开始呢，我们就要开始真正的实现一个完整的项目了！❀❀❀
⭐在实现项目的过程中，会将一些比较重要的点进行讲解，确保基础薄弱的宝子们都能够理解！本次博客的开始也算是为了一边学一边做项目❗
那么话不多说我们开始吧 在这里插入图片描述

vue

前情提要

引言

在前端开发中，专题组件是一个常见的功能模块，用于展示特定主题的内容。本文将通过一个uni-app专题组件的源代码，详细解析其设计和实现过程，帮助初学者快速掌握相关技能。

一、模板结构

view标签：用于定义页面的结构和布局。
navigator组件：用于页面间的导航。
image组件：用于显示图片。
class属性：用于指定CSS类，关联样式。

在这里插入图片描述

示例代码：

<view class="themeItem">
  <navigator url="" class="box">
    <image class="pic" src="../../common/image/5.jpg" mode="aspectFill"></image>
    <view class="mask">初音</view>
    <view class="tab">3天前更新</view>
  </navigator>
</view>

二、样式设计

height和width：定义元素的高度和宽度。
border-radius：设置元素的圆角。
overflow：控制内容溢出时的显示。
position：定位属性，用于定位元素。
absolute定位：相对于最近的已定位祖先元素进行定位。
flex布局：用于在容器内灵活排列子元素。
align-items和justify-content：控制flex布局中子元素的对齐方式。
backdrop-filter：用于创建毛玻璃效果。
font-weight和font-size：设置字体的粗细和大小。
padding：设置内边距。
border-radius：设置元素的圆角。
transform：用于对元素进行旋转、缩放等变换。
transform-origin：定义变换的基点。

示例代码：

.themeItem {
  .box {
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    .pic {
      width: 100%;
      height: 100%;
    }
    .mask {
      width: 100%;
      height: 70rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5rpx);
      font-weight: 600;
      font-size: 30rpx;
    }
    .tab {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(250, 129, 90, 0.7);
      backdrop-filter: blur(20rpx);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      border-radius: 0 0 20rpx 0;
      transform: scale(0.8);
      transform-origin: left top;
    }
  }
}

三、交互设计

navigator组件：用于实现页面跳转。
url属性：定义跳转的目标地址。

四、响应式设计

rpx单位：用于实现响应式布局，适应不同屏幕尺寸。

五、性能优化

backdrop-filter：在不影响性能的前提下，为元素添加视觉效果。

总结

通过本文的详细解析，我们深入了解了uni-app专题组件的构建过程，包括模板结构、样式设计、交互设计、响应式设计和性能优化等多个方面。每个知识点都通过生动的例子进行了解释，帮助初学者快速掌握uni-app开发的关键技能。希望本文能为你的前端开发之旅提供有价值的参考。

附录：代码注释

<template>
  <!-- 根元素，定义了一个名为themeItem的视图 -->
  <view class="themeItem">
    <!-- navigator组件，用于定义页面内的导航链接，class为box，方便后续样式定义 -->
    <navigator url="" class="box">
      <!-- image组件，用于显示图片，class为pic，src属性定义图片路径，mode定义图片填充模式 -->
      <image class="pic" src="../../common/image/5.jpg" mode="aspectFill"></image>
      <!-- 遮罩层视图，用于在图片上覆盖文本，class为mask -->
      <view class="mask">初音</view>
      <!-- 标签视图，用于显示更新时间，class为tab -->
      <view class="tab">3天前更新</view>
    </navigator>
  </view>
</template>

<script setup>
  // JavaScript逻辑，这里为空，因为使用了setup语法糖
  // setup是Vue 3的一个编译时语法糖，用于在组件中使用Composition API
</script>

<style lang="scss" scoped>
  // 定义了名为themeItem的样式作用域，scoped属性确保样式只作用于当前组件
  .themeItem {
    // 定义了.box类，用于给navigator组件添加样式
    .box {
      // 设置高度为340rpx，rpx是响应式像素单位，可以根据屏幕宽度变化
      height: 340rpx;
      // 设置圆角为10rpx
      border-radius: 10rpx;
      // 设置溢出内容为隐藏
      overflow: hidden;
      // 设置定位为相对定位，作为绝对定位子元素的参考点
      position: relative;
      // 定义了.pic类，用于给image组件添加样式
      .pic {
        // 图片宽度设置为100%，占据父容器的全部宽度
        width: 100%;
        // 图片高度设置为100%，占据父容器的全部高度
        height: 100%;
      }
      // 定义了.mask类，用于给遮罩层添加样式
      .mask {
        // 设置宽度为100%，占据父容器的全部宽度
        width: 100%;
        // 设置高度为70rpx
        height: 70rpx;
        // 设置定位为绝对定位，相对于最近的相对定位或绝对定位的祖先元素定位
        position: absolute;
        // 设置底部边距为0，紧贴父容器底部
        bottom: 0;
        // 设置左侧边距为0，紧贴父容器左侧
        left: 0;
        // 设置背景颜色为半透明黑色
        background: rgba(0,0,0,0.2);
        // 设置文本颜色为白色
        color: #fff;
        // 使用flex布局，使得子元素可以灵活排列
        display: flex;
        // 设置垂直居中对齐
        align-items: center;
        // 设置水平居中对齐
        justify-content: center;
        // 设置背景模糊效果
        backdrop-filter: blur(5rpx);
        // 设置字体加粗
        font-weight: 600;
        // 设置字体大小
        font-size: 30rpx;
      }
      // 定义了.tab类，用于给更新时间标签添加样式
      .tab {
        // 设置定位为绝对定位
        position: absolute;
        // 设置左侧边距为0，紧贴父容器左侧
        left: 0;
        // 设置顶部边距为0，紧贴父容器顶部
        top: 0;
        // 设置背景颜色为半透明橙色
        background: rgba(250, 129, 90, 0.7);
        // 设置背景模糊效果
        backdrop-filter: blur(20rpx);
        // 设置文本颜色为白色
        color: #fff;
        // 设置字体大小
        font-size: 22rpx;
        // 设置内边距
        padding: 6rpx 14rpx;
        // 设置左下角圆角为20rpx
        border-radius: 0 0 20rpx 0;
        // 设置缩放效果，scale(0.8)表示缩小到原来的80%
        transform: scale(0.8);
        // 设置变换的基点为左上角
        transform-origin: left top;
      }
    }
  }
</style>