壁纸小程序Vue3(首页布局)

1.创建一个公共目录common来存放css和images

App.vue中引用

<style lang="scss">
    /*每个页面公共css */
  @import 'common/style/common-style.scss';
  
  
</style>
 

 2.渲染轮播图

<template><view class="homeLayout"><view class="banner"><swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"indicator-active-color="#fff" autoplaycircular><swiper-item v-for="item in 3" ><image src="../../common/images/lxja.webp" mode="widthFix"></image></swiper-item></swiper></view></view>
</template><script setup></script><style lang="scss" scoped>.homeLayout{.banner{width: 750rpx;padding: 30rpx 0;swiper{width: 750rpx;height: 340rpx;// swiper-item{}//简化&-item{width: 100%;height: 100%;padding: 0 30rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}}}}
</style>

3.公告的轮播

  <view class="notice"><view class="left"><uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons><text class="text">公告</text></view><view class="center"><swiper vertical autoplay interval="1500" duration="300" circular><swiper-item v-for="item in 4">文字内容文字内容文字内容文字内容文字内容文字内容</swiper-item></swiper></view><view class="right"><uni-icons type="right" size="16" color="#333"></uni-icons></view></view>
  .notice{width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.left{width: 140rpx;display: flex;align-items: center;justify-content: center;.text{color: #28b389;font-weight: 600;font-size: 28rpx;}}.center{flex: 1;swiper{height: 100%;&-item{height: 100%;font-size: 30rpx;color: #666;//超出的文字用...替换overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.right{width: 70rpx;display: flex;align-items: center;justify-content: center;}}

4.渲染公告下的内容

创建公共标题组件common-title

 <view class="select"><common-title></common-title><view class="content"><scroll-view scroll-x><view class="box" v-for="item in 8"><image src="../../common/images/lxja.webp" mode="aspectFill"></image></view></scroll-view></view></view>

将元素的display属性设置为inline-block可以让元素既有行内元素可以一行显示多个的特性,又有块级元素可以设置宽高的特性。 

 

.select{padding-top: 50rpx;.content{width: 720rpx;margin-left: 30rpx;margin-top: 30rpx;scroll-view{white-space: nowrap;.box{width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child{margin-right: 30rpx;}}}}

5.引入插槽定义公共标题模块

common-title

<template><view class="common-title"><view class="name"><!-- 插槽 --><slot name="name"></slot></view><view class="custom"><slot name="custom"></slot></view></view>
</template><script setup></script><style lang="scss" scoped>
.common-title{display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;.name{font-size: 40rpx;}
}
</style>

index.vue

  <view class="select"><common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#28b389"></uni-icons><view><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></view></template></common-title><view class="content"><scroll-view scroll-x><view class="box" v-for="item in 8"><image src="../../common/images/lxja.webp" mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="" class="more">More+</navigator></template></common-title></view>

6.渲染专题精选

 index.vue

 <view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="" class="more">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 8"></theme-item></view></view>

 

.theme{padding-top: 50rpx;.more{font-size: 32rpx;color: #888;}.content{margin-top: 30rpx;padding: 0 30rpx;//网格布局display: grid;//每个元素中间有一个间隙gap: 15rpx;//一行展示三个每行平均分配grid-template-columns: repeat(3,1fr);}}

新创建一个组件them-item

<template><view class="themeTtem"><navigator url="" class="box"><image class="pic" src="https://img1.baidu.com/it/u=871832137,2572636834&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1198" mode="aspectFill"></image><view class="mask">盛世美颜</view><view class="tab">3天前更新</view></navigator></view>
</template>

.themeTtem{
  .box{
    height: 340rpx;
    border-radius: 10rpx;
    //不加overflow:圆角显示不出来
    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(20rpx);
      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;
      //网格文字最小为12px,要想小于12px,可进行如下操作
      //缩放
      transform: scale(0.8);
      //以左上角基准偏移
      transform-origin: left top;
    }
  }
}
 

1)渲染更多标题

index.vue

 <view class="theme">
          <common-title>
            <template #name>专题精选</template>
            <template #custom>
              <navigator url="" class="more">More+</navigator>
            </template>
          </common-title>
          <view class="content">
              <theme-item v-for="item in 8"></theme-item>
              <theme-item :isMore="true"></theme-item>
          </view>

      </view>

 them-item

 <view class="themeTtem">
      <navigator url="" class="box" v-if="!isMore">
        <image class="pic" src="https://img1.baidu.com/it/u=871832137,2572636834&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1198" mode="aspectFill"></image>
        <view class="mask">盛世美颜</view>
        <view class="tab">3天前更新</view>
      </navigator>
      <navigator url="" class="box more" v-else>
        <image class="pic" src="https://img1.baidu.com/it/u=351608013,944758287&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" mode="aspectFill"></image>
        <view class="mask">
          <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
          <view class="text">更多</view>
        </view>
      </navigator>

  </view>

.box.more{
    .mask{
      width: 100%;
      height: 100%;
      flex-direction: column;
    }
    .text{
      font-size: 28rpx;
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/293067.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Godot 4 教程《勇者传说》依赖注入 学习笔记(0):环境配置

文章目录 前言相关地址环境配置初始化环境配置文件夹结构代码结构代码运行 资源文件导入像素风格窗口环境设置背景设置,Tileap使用自动TileMap 人物场景动画节点添加站立节点添加移动动画添加 通过依赖注入获取Godot的全局属性项目声明 当前项目逻辑讲解角色下降添加代码位置问…

【51单片机入门记录】IIC总线协议 EEPROM存储器AT24C02概述

一、IIC总线协议概述 &#xff08;1&#xff09;IIC&#xff08;Inter-IntegratedCircuit&#xff09;总线 是一种由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器以及其外围设备。IIC也被成为I2C/IC&#xff0c;其实两者是完全相同的&#xff0c;只是名词不…

Linux(CentOS7)配置系统服务以及开机自启动

目录 前言 两种方式 /etc/systemd/system/ 进入 /etc/systemd/system/ 文件夹 创建 nginx.service 文件 重新加载 systemd 配置文件 ​编辑 配置开机自启 /etc/init.d/ 进入 /etc/init.d/ 文件夹 创建 mysql 文件 编写脚本内容 添加/删除系统服务 配置开机自启 …

精通Go语言文件上传:深入探讨r.FormFile函数的应用与优化

1. 介绍 1.1 概述 在 Web 开发中&#xff0c;文件上传是一项常见的功能需求&#xff0c;用于允许用户向服务器提交文件&#xff0c;如图像、文档、视频等。Go 语言作为一门强大的服务器端编程语言&#xff0c;提供了方便且高效的方式来处理文件上传操作。其中&#xff0c;r.F…

9.动态规划——2.最大序列和

例题——最大序列和 找状态 思路一&#xff08;&#xff09; 定义一个状态 d p [ i ] dp[i] dp[i]&#xff0c;计为前i个数构成子序列和的最大值 此法状态转移比较困难&#xff0c;即若 d p [ i ] dp[i] dp[i]与 d p [ i − 1 ] dp[i-1] dp[i−1]没有明确的关系&#xff0c;有…

Ribbon有哪些负载均衡策略

负载均衡类都实现了IRule接口。 RandomRule&#xff1a;随机的选用一个实例 RoundRobinRule&#xff1a;轮询的使用实例 RetryRule&#xff1a;在轮询的基础上加了一个错误重试机制&#xff0c;在deadline时间内会不断的重试 WeightResponeTimeRule&#xff1a;根据权重去做…

【计算机网络】四层负载均衡和七层负载均衡

前言 1、分层方式 首先我们知道&#xff0c;在计算机网络中&#xff0c;常用的协议分层方式&#xff1a;OSI和TCP/IP&#xff0c;以及实际生产中使用的协议划分方式。 在OSI中&#xff0c;各层的职责如下&#xff1a; 应用层&#xff1a;对软件提供接口以使程序能使用网络服…

深入探索位图技术:原理及应用

文章目录 一、引言二、位图&#xff08;Bitset&#xff09;基础知识1、位图的概念2、位图的表示3、位图操作 三、位图的应用场景1、数据查找与存储2、数据去重与排序 四、位图的实现 一、引言 位图&#xff0c;以其高效、简洁的特性在数据处理、存储和检索等多个领域发挥着举足…

Nest安装及使用~

前提条件 请确保您的操作系统上安装了 Node.js&#xff08;版本 > 16&#xff09; &#x1f4da;要查看指南&#xff0c;请访问 https://docs.nestjs.com/ &#x1f4da;要查看中文 指南&#xff0c; 请访问 https://docs.nestjs.cn/ $ node -v v16.18.1 $ npm -v 7.x.x安…

【C++】C++11的新特性

目录 一. 列表初始化1. 列表初始化的原理: initializer_list 二. 类型的声明1. auto2. decltype 三. nullptr四. 范围 for五. STL容器变化六. 类的新功能 一. 列表初始化 在 C 语言中, 就可以使用 {} 对数组或结构体进行初始化, 而 C11 扩大了 {} 的使用范围, 使其可以初始化所…

Mysql-数据库范式和Mysql安装

文章目录 数据库三范式第一范式&#xff1a;1NF第二范式&#xff1a;2NF第三范式&#xff1a;3NF Yum安装CentOS7 yum安装解决“Access denied”拒绝访问异常 数据库三范式 第一范式&#xff1a;1NF 第一范式&#xff1a;数据库中无重复的列&#xff0c;每一列都是不可分割的…

乐乐音乐鸿蒙版-支持krc歌词(动感歌词、翻译和音译歌词)

简介 乐乐音乐主要是基于HarmonyOS开发的音乐播放器&#xff0c;它支持lrc歌词和动感歌词(ksc歌词、krc歌词和hrc歌词等)、多种格式歌词转换器及制作动感歌词、翻译歌词和音译歌词。 开发环境 ArkTS、Stage模型、SDK3.1、 API 9 注&#xff1a;没试过在真机条件下调试。 功…

Java基础学习: JDK动态代理

文章目录 一、什么是JDK动态代理二、JDK动态代理的特点三、JDK动态代理类如何使用四、JDK动态代理原理分析1、创建代理对象2、生成代理类 一、什么是JDK动态代理 JDK动态代理是Java提供的一种动态生成代理类和代理对象的技术。它主要利用Java的反射机制实现&#xff0c;在运行…

Open CASCADE学习|GeomFill_Frenet

GeomFill_Frenet继承自GeomFill_TrihedronLaw类。GeomFill_Frenet类主要用于实现Frenet标架的计算。Frenet标架是一个沿曲线移动的局部坐标系&#xff0c;它由切向量、法向量和副法向量组成&#xff0c;常用于机器人学、计算机图形学等领域。 class GeomFill_Frenet : publi…

docker 数据卷

Docker数据卷是Docker中的一个核心机制&#xff0c;用于实现容器间数据的持久化和共享。它是宿主机上的一个特殊目录&#xff0c;可以供一个或多个容器使用。容器删除时&#xff0c;不会删除其挂载的数据卷&#xff0c;也不会存在类似的垃圾机制对容器存在的数据卷进行处理。 …

每日面经分享(Spring Boot: part2 DAO层)

1. Spring Boot DAO层的作用 a. 封装数据访问逻辑&#xff1a;DAO层的主要责任是封装与数据访问相关的逻辑。负责处理与数据库的交互&#xff0c;包括数据的增删改查等操作。通过将数据访问逻辑统一封装在DAO层中&#xff0c;可以提高代码的可维护性和可重用性。 b. 解耦业务逻…

【vue3学习笔记(二)】(第141-143节)初识setup;ref函数_处理基本类型;ref函数_处理对象类型

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第141-143节 课程 P141节 《初识setup》笔记 1、setup是所有组合式API“表演的舞台”&#xff0c;组件中所用到的所有数据、方法、监视数据、生命周期钩子等都需要配置在setup中。 2、setup的两种返回值&…

【Linux】socket套接字

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 目录 &#x1f449;&#x1f3fb;IP地址和端口号pid和port的关系 &#x1f449;&#x1f3fb;TCP和UDP&#x1f449;&#x1f3fb;网络字节序&…

NineData与StarRocks商业化运营公司镜舟科技完成产品兼容认证

近日&#xff0c;镜舟科技与NineData完成产品兼容测试。在经过联合测试后&#xff0c;镜舟科技旗下产品与NineData云原生智能数据管理平台完全兼容&#xff0c;整体运行高效稳定。 镜舟科技致力于帮助中国企业构建卓越的数据分析系统&#xff0c;打造独具竞争力的“数据护城河”…

2-HDFS常用命令及上传下载流程

HDFS NameNode 安全模式(safemode) 当NameNode被重启的时候&#xff0c;自动进入安全模式 在安全模式中&#xff0c;NameNode首先会触发edits_inprogress文件的滚动。滚动完成之后&#xff0c;更新fsimage文件 更新完成之后&#xff0c;NameNode会将fsimage文件中的元数据加…