学习Uni-app开发小程序Day18

昨天学习了使用轮播显示图片和文字，轮播方式纵向和横向。今天使用扩展组件和scroll-view显示图片，使用scroll-view的grid方式、插槽slot、自定义组件、磨砂背景定位布局做专题组件
在这里插入图片描述
这就是需要做成的效果，下面将一步一步的完成。
首先，这里的每日推荐和专题精选都是相同的组件，这里使用自定义组件进行，
第一步：在项目根目录创建文件夹，components文件夹，创建组件，
看这个布局，是文字不同，后面的显示不同，这里使用slot

<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>

这里就是用slot了，定义一个slot的名称，在父组件中直接传参就能显示不同的效果

<common-title><template v-slot:name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#309877"></uni-icons><view class="text"><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/preview_small.webp" mode="aspectFill"></image></view></scroll-view>
</view>

这就是拓展组件和插槽的使用，这里也使用了扩展组件，顺便复习下，扩展组件的使用：找到需要的组件，点击下载导入，使用的时候，只用引入需要的组件名称，就可以使用了，至于组件的属性，查看文档有详细说明。
以上是每日推荐模块，但是出来后显示的布局方式是纵向显示的，这里需要修改样式，让横向显示，

.select {margin-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;}}}.date {color: #309877;display: flex;align-items: center;.text {margin-left: 5rpx;}}}

这就把每日推荐这个模块的全部显示出来了。
下来是要做专题精选，这里文字模块，使用的和每日推荐使用的是相同的布局，直接使用同样的组件就好。下面的图片显示，使用的是scroll-view的grid方式，因为布局后面，还有个模糊的更多，点击图片进入的是图片详情，点击更多进入的是其他页面，两个显示的不同，点击后进入的方式也不同，这里就用到grid了，

<view class="theme"><common-title><template v-slot:name>专题精选</template><template #custom><navigator url="" class="more">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 5"></theme-item><theme-item :isMore="true"></theme-item></view></view>
<!-- style -->
.theme{margin: 50rpx 0;.more{font-size: 32rpx;color: #888;}.content{margin-top: 30rpx;padding: 0 30rpx;display: grid;gap: 15rpx;//属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式grid-template-columns: repeat(3,1fr);//display：grid 是转为网格布局，这个是必须的// grid-template-columns：1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格,这里也可以是用repeat（3,1fr），是平分成三列，然后自适应宽度，这里看自己需求需要分成几列//grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。注意：实现这种响应式布局，一定要注意父容器不能使用固定宽度，可以将父容器改为如：80%，这样就能根据屏幕的宽度，自动展示一行展示几个了。// gap:30px 这是网格四周的间隔// 注意：这三个属性是给父容器添加的，子元素，可以不用设置宽度，也不用设置margin间距即可完成如下布局。// grid-row和grid-column可以控制某个元素占领几份// 以grid-row行为例，从第几列开始 / 第几列+想占几个；// grid-row: 1/3;// grid-column: 1/3;}}

上面是设置grid显示的不同的样式，是不是看的云里雾里的，没事，老师有专门的课程，grid网格布局，比flex方便太多了，介绍几种常用的grid布局属性，这里有详细的解释和案例，
磨砂背景定位布局，在列表中，图片上特定区域，有文字和磨砂背景的，这里也是使用自定义组件的方式

<template><view class="theme-item"><navigator url="" class="box" v-if="!isMore"><image class="pic" src="../../common/images/classify1.jpg" mode="aspectFill"></image><view class="mack">明星美女</view><view class="tabMack">3天前更新</view></navigator><navigator url="" class="box more" v-else><image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image><view class="mack"><uni-icons type="more-filled" size="34" color="#fff"></uni-icons><text class="text">更多</text></view></navigator></view>
</template><script setup>
defineProps({isMore:{type:Boolean,default:false}
})
</script><style lang="scss" scoped>.theme-item {.box {height: 340rpx;border-radius: 10rpx;overflow: hidden;position: relative;.pic {width: 100%;height: 100%;}.mack {width: 100%;height: 70rpx;position: absolute;bottom: 0;left: 0;font-size: 30rpx;background: rgba(0, 0, 0, 0.2);color: #fff;display: flex;align-items: center;justify-content: center;backdrop-filter: blur(20rpx);font-weight: 600;}.tabMack {position: absolute; //指定一个元素在文档中的定位方式left: 0;top: 0;background: rgba(250, 190, 90, 0.7);backdrop-filter: blur(20rpx); //backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）font-size: 22rpx;color: #fff;padding: 6rpx 14rpx;border-radius: 0 0 20rpx 0;transform: scale(0.8); //属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。transform-origin: left top; //更改一个元素变形的原点}}.box.more{.mack{width: 100%;height: 100%;flex-direction: column;}.text{font-size: 28rpx;}}}
</style>

下面是整页的详细代码

<template><view class="homeLayout"><view class="banner"><swiper indicator-dots autoplay circular :interval="3000" :duration="1000"indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff"><swiper-item v-for="(item,index) in picArr" :key="item.id"><image :src="item.src" mode="aspectFill"></image></swiper-item></swiper></view><view class="notice"><view class="letf"><uni-icons type="sound-filled" size="20" color="#309877"></uni-icons><text class="text">公告</text></view><view class="center"><swiper vertical circular autoplay interval="1500" duration="300"><swiper-item v-for="item in 4">内容文字内容文字内容文字内容文字内容文字</swiper-item></swiper></view><view class="rigth"><uni-icons type="right" size="16" color="#333"></uni-icons></view></view><view class="select"><common-title><template v-slot:name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#309877"></uni-icons><view class="text"><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/preview_small.webp" mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template v-slot:name>专题精选</template><template #custom><navigator url="" class="more">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 5"></theme-item><theme-item :isMore="true"></theme-item></view></view></view>
</template><script setup>import {ref} from 'vue';const picArr = ref([{id: 1,src: "../common/images/banner1.jpg"},{id: 2,src: "../../common/images/banner2.jpg"},{id: 3,src: "../../common/images/banner3.jpg"}])
</script><style lang="scss" scoped>.homeLayout {.banner {width: 750rpx;padding: 30rpx 0; //padding：当是一个值的时候：是周围四边，两个值：第一个是：上下；第二个是左右；当三个值：第一是上。第二个是左右，第三个是下；当是四个值：第一个是上，第二个右，第三个下，第四个左swiper {width: 750rpx;height: 340rpx;&-item {width: 100%;height: 100%;padding: 0 30rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice {width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.letf {width: 140rpx;display: flex;justify-content: center;align-items: center;.text {font-weight: 600; //指定了字体的粗细程度, 详细查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weightfont-size: 28rpx;color: #309877;}}.center {flex: 1;swiper {height: 100%;&-item {height: 100%;font-size: 30rpx;color: #666;overflow: hidden; //设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。white-space: nowrap; //用于设置如何处理元素内的空白字符，nowrap是不让换行显示text-overflow: ellipsis; // 用于确定如何提示用户存在隐藏的溢出内容 ellipsis：超出文本部分使用省略号}}}.rigth {width: 70rpx;display: flex;justify-content: center;align-items: center;}}.select {margin-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;}}}.date {color: #309877;display: flex;align-items: center;.text {margin-left: 5rpx;}}}.theme{margin: 50rpx 0;.more{font-size: 32rpx;color: #888;}.content{margin-top: 30rpx;padding: 0 30rpx;display: grid;gap: 15rpx;//属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式grid-template-columns: repeat(3,1fr);//display：grid 是转为网格布局，这个是必须的// grid-template-columns：1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格,这里也可以是用repeat（3,1fr），是平分成三列，然后自适应宽度，这里看自己需求需要分成几列//grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。注意：实现这种响应式布局，一定要注意父容器不能使用固定宽度，可以将父容器改为如：80%，这样就能根据屏幕的宽度，自动展示一行展示几个了。// gap:30px 这是网格四周的间隔// 注意：这三个属性是给父容器添加的，子元素，可以不用设置宽度，也不用设置margin间距即可完成如下布局。// grid-row和grid-column可以控制某个元素占领几份// 以grid-row行为例，从第几列开始 / 第几列+想占几个；// grid-row: 1/3;// grid-column: 1/3;}}}
</style>

这里提下，如果图片放在common下，这个是在打包的时候，只有用到的才会打包，没有用到的是不打包的，我这里在弄轮播图的时候，就使用的是common下的图片了，把这些图片放在数组中，然后在页面上使用，在H5的时候，是没问题的，因此就没多看，今天在小程序中，轮播图片不显示，原因是没有在小程序中找到，试了各种办法，还是不行，但把图片地址直接引用common下的图片，又可以了，这不清楚原因，这里记录下，后期知道了在补充。
为什么要专门说下这个，从这里看出，各个平台存在差异化，目前是以微信小程序为主的，所以在做完一个小功能后，还是要在小程序中查看下是不是可以使用，不然到后期出现问题更改起来会很繁琐的。
加油，学无止境！

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

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

相关文章

如何高效创建与配置工程环境：零基础入门

如何高效创建与配置工程环境：零基础入门

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、工程环境的搭建与准备 二、配置虚拟环境与选择解释器 三、编写代码与自动添加多行注释 …
阅读更多...
git describe --tags报错 fatal: No names found, cannot describe anything.

git describe --tags报错 fatal: No names found, cannot describe anything.

文章目录 git describe --tags报错 fatal: No names found, cannot describe anything. git describe --tags报错 fatal: No names found, cannot describe anything. 问题描述&#xff1a; git describe --tags fatal: No names found, cannot describe anything.原因分析&a…
阅读更多...
SpringMVC笔记

SpringMVC笔记

一、SpringMVC 简介 1.1 什么是 MVC MVC 是一种软件架构的思想&#xff0c;将软件按照模型、视图、控制器来划分 1.M&#xff1a;Model 模型层&#xff0c;指工程中的 JavaBean &#xff0c;作用是处理数据 JavaBean 分为两类 实体类Bean&#xff1a;专门存储业务数据的…
阅读更多...
C++vector的简单模拟实现

C++vector的简单模拟实现

文章目录 目录 文章目录 前言 一、vector使用时的注意事项 1.typedef的类型 2.vector不是string 3.vector 4.算法sort 二、vector的实现 1.通过源码进行猜测vector的结构 2.初步vector的构建 2.1 成员变量 2.2成员函数 2.2.1尾插和扩容 2.2.2operator[] 2.2.3 迭代器 2…
阅读更多...
云存储与云计算详解

云存储与云计算详解

1. 云存储与云计算概述 1.1 云存储 云存储&#xff08;Cloud Storage&#xff09;是指通过互联网将数据存储在远程服务器上&#xff0c;用户可以随时随地访问和管理这些数据。云存储的优点包括高可扩展性、灵活性和成本效益。 1.2 云计算 云计算&#xff08;Cloud Computin…
阅读更多...
前端 控制台提示invalid date

前端 控制台提示invalid date

如果你遇到了 "Invalid Date" 的错误&#xff0c;这通常意味着传递给 Date 构造函数的字符串或数值无法被解析为一个有效的日期。对于时间戳来说&#xff0c;确保它是一个有效的数字&#xff08;表示自1970年1月1日00:00:00 UTC以来的毫秒数&#xff09;。 以下是一…
阅读更多...
Java如何设计一个功能

Java如何设计一个功能

流程说明:实现一组功能的步骤 1,充分了解需求,包括所有的细节,需要知道要做一个什么样的功能。 2,设计实体/表 正向工程:设计实体、映射文件 --> 建表 反向工程:设计表 --> 映射文件、实体 设计实体类型分析步骤&#xff1a; 1&#xff09;功能模块有几个实体…
阅读更多...
【Apache Doris】BE宕机问题排查指南

【Apache Doris】BE宕机问题排查指南

【Apache Doris】BE宕机问题排查指南 背景BE宕机分类如何判断是BE进程是Crash还是OOMBE Crash 后如何排查BE OOM 后如何分析Cache 没及时释放导致BE OOM&#xff08;2.0.3-rc04&#xff09; 关于社区 作者&#xff5c;李渊渊 背景 在实际线上生产环境中&#xff0c;大家可能遇…
阅读更多...
uniapp、微信小程序隐藏页面滚动条

uniapp、微信小程序隐藏页面滚动条

阅读更多...
校园网拨号上网环境下多开虚拟机，实现宿主机与虚拟机互通，并访问外部网络

校园网拨号上网环境下多开虚拟机，实现宿主机与虚拟机互通，并访问外部网络

校园网某些登录客户端只允许同一时间一台设备登录&#xff0c;因此必须使用NAT模式共享宿主机的真实IP&#xff0c;相当于访问外网时只使用宿主机IP&#xff0c;此方式通过虚拟网卡与物理网卡之间的数据转发实现访问外网及互通 经验证&#xff0c;将centos的物理地址与主机物理…
阅读更多...
有什么好用的语音翻译软件推荐？亲测实用的语音翻译工具来了

有什么好用的语音翻译软件推荐？亲测实用的语音翻译工具来了

嘿&#xff0c;大家好&#xff01;你们有没有想过&#xff0c;现在世界这么“小”&#xff0c;我们跟不同国家的人打交道的机会越来越多了。 但是呢&#xff0c;语言不通真是个大问题。别担心&#xff0c;现在有个超棒的解决方案——语音翻译技术&#xff01;这玩意儿能实时把…
阅读更多...
Spring Cloud学习笔记（Nacos）：配置中心基础和代码样例

Spring Cloud学习笔记（Nacos）：配置中心基础和代码样例

这是本人学习的总结&#xff0c;主要学习资料如下 - 马士兵教育 1、Overview2、样例2.1、Dependency2.2、配置文件的定位2.3、bootstrap.yml2.4、配置中心新增配置2.5、验证 1、Overview 配置中心用于管理配置项和配置文件&#xff0c;比如平时写的application.yml就是配置文件…
阅读更多...
Python 遍历字典的方法，你都掌握了吗

Python 遍历字典的方法，你都掌握了吗

Python中的字典是一种非常灵活的数据结构&#xff0c;它允许通过键来存储和访问值。在处理字典时&#xff0c;经常需要遍历字典中的元素&#xff0c;以下是几种常见的遍历字典的方法。 1. 使用 for 循环直接遍历字典的键 字典的键是唯一的&#xff0c;可以直接通过 for 循环来…
阅读更多...
【Spring Security + OAuth2】OAuth2

【Spring Security + OAuth2】OAuth2

Spring Security OAuth2 第一章 Spring Security 快速入门 第二章 Spring Security 自定义配置 第三章 Spring Security 前后端分离配置 第四章 Spring Security 身份认证 第五章 Spring Security 授权 第六章 OAuth2 文章目录 Spring Security OAuth21、OAuth2简介1.1、OAu…
阅读更多...
call、apply和bind

call、apply和bind

call、apply和bind都是JavaScript中函数对象的方法&#xff0c;用于改变函数的this值。 call&#xff1a;call方法接收一个对象和一系列参数&#xff0c;并立即调用函数&#xff0c;将this值设置为提供的对象。例如&#xff1a; function greet(greeting, punctuation) {cons…
阅读更多...
Linux驱动开发笔记（二） 基于字符设备驱动的I/O操作

Linux驱动开发笔记（二） 基于字符设备驱动的I/O操作

文章目录 前言一、设备驱动的作用与本质1. 驱动的作用2. 有无操作系统的区别 二、内存管理单元MMU三、相关函数1. ioremap( )2. iounmap( )3. class_create( )4. class_destroy( ) 四、GPIO的基本知识1. GPIO的寄存器进行读写操作流程2. 引脚复用2. 定义GPIO寄存器物理地址 五、…
阅读更多...
【2024最新华为OD-C卷试题汇总】传递悄悄话的最长时间(100分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C卷试题汇总】传递悄悄话的最长时间(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 前…
阅读更多...
东哥一句兄弟，你还当真了？

东哥一句兄弟，你还当真了？

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 你还真把自己当刘强东兄弟了?谁跟你是兄弟了?你在国外的房子又不给我住&#xff0c;你出去旅游也不带上我!都成人年了&#xff0c;东哥一句客套话&#xff0c;别当真! 今天&#xff0c;东哥在高管会上直言&…
阅读更多...
mysql内存结构

mysql内存结构

一&#xff1a;逻辑存储结构&#xff1a;表空间->段->区->页->行、 表空间&#xff1a;一个mysql实例对应多个表空间&#xff0c;用于存储记录&#xff0c;索引等数据。 段&#xff1a;分为数据段&#xff0c;索引段&#xff0c;回滚段。innoDB是索引组织表&…
阅读更多...
215. 数组中的第K个最大元素（快速排序、堆排序）

215. 数组中的第K个最大元素（快速排序、堆排序）

根据这道题总结一下快速排序和堆排序&#xff0c;再根据这两种方法写这道题。 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实…
阅读更多...
最新文章

Copyright @ 2022~2023