学习Uni-app开发小程序Day17

今天开始,就把uni-app前期使用的全部学完了,现在就把以前学习的,做成一案例,中间有未讲的,在进行补充,这里是根据老师视频进行项目案例编写的。
先弄出效果图,然后在根据效果图进行代码的编辑
在这里插入图片描述
这是今天需要弄出来的效果图,

添加轮播图

在前面学习了轮播图片的功能,这里就使用起来,使用的是swiper,显示图片的是swiper-items,这里记录下

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

indicator-dots:是否显示面板指示点
autoplay:是否自动切换
circular:是否采用衔接滑动,即播放到末尾后重新回到开头
interval:自动切换时间间隔
duration:滑动动画时长
indicator-color:指示按钮的颜色
indicator-active-color:选中的颜色

这就是轮播图了,但是在运行后,发现样式是不对的,这里得添加下样式

.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;}}}}

这就是整个轮播图的样式,这里说明习下,当如果直接使用这个样式,出来的是不正确的,原因是,是用padding是添加了距离边框,但是添加的这个距离边框会把原始布局往外延伸,这里需要设置成内边框,如何设置:这就是css样式的引入了
在根据下添加一个目录,common,创建一个scss的样式,这个样式设置成全局的样式,

view,swiper,swiper-item{box-sizing: border-box;//定义了 user agent 应该如何计算一个元素的总宽度和总高度// content-box// 默认值,标准盒子模型。width 与 height 只包括内容的宽和高,不包括边框(border),内边距(padding),外边距(margin)。注意:内边距、边框和外边距都在这个盒子的外部。比如说,.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。// 尺寸计算公式:// width = 内容的宽度// height = 内容的高度// 宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。// border-box// width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负,并且被分配到 0,使得不可能使用 border-box 使元素消失。// 尺寸计算公式:// width = border + padding + 内容的宽度// height = border + padding + 内容的高度
}

然后在app下面引用就可以了。

纵向使用轮播文字

看效果图,有个轮播的公告,这也是使用swiper进行设计的,

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

这就是公告的布局,但是使用这个后,发现所有的组件是纵向显示的,和模版是不相同的,修改下样式:

.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;}}

如果要修改view显示的方式,只要设置了display: flex;,就可以了,
&-item:这是父组件是swiper,子组件是swiper-item,这里的简化方式就可以使用这种写法
这样就是各个布局的代码和样式,下面是全部代码

<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>
</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;}}
}</style>

这就是全部的轮播图和轮播文字!
有不对的地方欢迎大家提问,我是小白,大家共同学习!

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

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

相关文章

uni-app 微信 支付宝 小程序 使用 longpress 实现长按删除功能,非常简单 只需两步

1、先看效果 2、直接上代码 ui结构 <view class"bind" longpress"deleteImage" :data-index"index"><view class"bind_left">绑定设备</view><view class"bind_right"><view class"bind_t…

Raven2掠夺者2渡鸦2角色创建、游戏预下载、账号怎么注册教程

《渡鸦2》&#xff08;Raven 2&#xff09;是由韩国开发的一款大型多人在线角色扮演游戏&#xff08;MMORPG&#xff09;类型的手游&#xff0c;作为前作《Raven》的续集&#xff0c;继承并发展了其黑暗奇幻世界观&#xff0c;同时在游戏设计和内容上进行了大量创新。游戏预计于…

Spring:IoC容器(基于注解管理bean)

1. HelloWorld * 引入依赖* 开启组件扫描* 使用注解定义 Bean* 依赖注入 2.开启组件扫描 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/20…

阿里云OSS文件上传和下载完整指南

目录 前言 一、前期准备 二、文件上传 上传进度条 三、文件下载 1.流式下载 2.下载到本地 3.进度条 前言 文件上传是常见需求&#xff0c;一般我们不会把文件直接上传到应用服务器&#xff0c;因为单台服务器存储空间是有限的&#xff0c;不好扩展。阿里云对象存储&…

Diffusion Model 和 Stable Diffusion 详解

文章目录 Diffusion Model 基础生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程 反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标 详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构VAE 模型文本编码器…

MyBatis的基础操作

目录 一.什么是MyBatis? 二.使用MyBatis的准备工作 1.引入依赖: 2.配置数据库连接字符串(建立MaBatis和MySQL的连接) 3.在model包中建立数据库对应的实体类UserInfo 三.通过注解的方式实现MyBatis的开发 1.插入语句(Insert) 2.删除语句(Delete) 3.更新语句(Update) 4…

突破乙肝治疗瓶颈新希望!恒瑞医药小核酸疗法领跑进入II期临床试验

近日&#xff0c;恒瑞医药的针对慢性乙型肝炎的小核酸疗法要准备开启一项多中心、随机、开放、平行设计的 II 期研究,旨在评估 HRS-5635 注射液单独或与其他药物联合治疗慢性乙型肝炎患者的疗效和安全性二期临床实验。去年开启的1期&#xff0c;今年就要准备2期实验了。 咱们国…

Java核心: Stream流的实现原理

Java 8之后我们对Stream的使用都已经习以为常了&#xff0c;它帮助我们从怎么做的细节里脱身&#xff0c;只要告诉它做什么即可。这一篇文章我们主要讲Java Stream的实现原理&#xff0c;手写一个Stream框架&#xff0c;然后再来讲解Java Stream的核心类&#xff0c;做到知其然…

vue-3d-loader 加载多个模型

需求 1、在使用three.js进行开发的过程中&#xff0c;需要列表加载多个模型&#xff0c;并根据需要多模型进行加载。 2、当鼠标移动到图片上去的时候&#xff0c;开始加载模型&#xff0c; 模型进行加载和展示。 3、在制作3d沉浸式商城时&#xff0c;需要根据需求&#xff0…

字典推导式

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 使用字典推导式可以快速生成一个字典&#xff0c;它的表现形式和列表推导式类似。例如&#xff0c;我们可以使用下面的代码生成一个包含4个随机数的字…

shell编程之面交互

Here Document Here Document使用注意事项 面交互 面交互修改账号密码 [rootlocalhost opt]# passwd zhangsan <<EOF > abc1234 #下面两行是输入密码 > abc1234 > EOF 更改用户 zhangsan 的密码 。 新的 密码&#xff1a;无效的密码&#xff1a;…

贝叶斯:共轭先验(conjugacy)

共轭先验与共轭分布 在贝叶斯统计中&#xff0c;如果后验分布与先验分布属于同类&#xff0c;则先验分布与后验分布被称为共轭分布&#xff0c;而先验分布被称为似然函数的共轭先验。&#xff08;要求后验分布与先验分布是同类分布&#xff0c;不要求似然函数分布相同。&#…

红外超声波雷达测距

文章目录 一HC-SR04介绍1HC-SR04简介及工作原理 二用HAL库实现HC-SR04测量距离1STM32CubeMX配置2keil53代码的添加 三效果 一HC-SR04介绍 1HC-SR04简介及工作原理 超声波是振动频率高于20kHz的机械波。它具有频率高、波长短、绕射现象小、方向性好、能够成为射线而定向传播等…

二叉树尾部分

1.二叉树的销毁 2.二叉树的层序遍历 3.判断二叉树是否为完全二叉树 4.二叉树的性质 1.二叉树的销毁 以后序的方式遍历销毁左右子数&#xff0c;因为前序和中序销毁的话根会被销毁而找不到左右子树的位置&#xff0c;后序的根访问在最后&#xff0c;可以找到左右的子树位置。…

PHP深入理解-PHP架构布局

PHP的架构布局涉及多个层次&#xff0c;让我们一起探讨一下吧&#xff01;&#x1f680; 执行流程&#xff1a;解析为Token&#xff1a;将PHP代码解析成标记&#xff08;tokens&#xff09;。抽象语法树&#xff1a;将语法解析树转换为抽象语法树。Opcodes&#xff1a;将抽象语…

RAG-GPT实践过程中遇到的挑战

引言 前面介绍了使用RAG-GPT和OpenAI快速搭建LangChain官网智能客服。有些场景&#xff0c;用户可能无法通过往外网访问OpenAI等云端LLM服务&#xff0c;或者由于数据隐私等安全问题&#xff0c;需要本地部署大模型。本文将介绍通过RAG-GPT和Ollama搭建智能客服。 RAG技术原理…

强化学习_06_pytorch-PPO2实践(Humanoid-v4)

一、PPO优化 PPO的简介和实践可以看笔者之前的文章 强化学习_06_pytorch-PPO实践(Pendulum-v1) 针对之前的PPO做了主要以下优化&#xff1a; -笔者-PPO笔者-PPO2refdata collectone episodeseveral episode(one batch)activationReLUTanhadv-compute-compute adv as one seri…

CC1链补充-LazyMap

前言 在我们上一篇中详细分析了CC1链&#xff0c;但是在CC1链中还有一条链就是LazyMap类 1.安装和CC1核心 环境安装的详情可以见上篇CC1分析的第二部分&#xff0c;环境搭建部分 两条不同的路线其实第一步核心都是相同的&#xff0c;执行类都是Tansformer接口和实现类&#…

【MySQL事务(上)】

文章目录 前言一、什么是事务&#xff1f;1.关于事务的特性 二、为什么要有事务三、事务的提交方式测试事务准备工作事务的操作1.启动事务2.对事务进行回滚&#xff08;只有在事务进行期间&#xff09;3.提交事务&#xff08;持久化&#xff09;4.事务的异常情况结论 四、事务的…

侧缝计怎么安装_测缝计安装方法介绍

测缝计作为土木工程和结构健康监测中常用的仪器&#xff0c;用于测量裂缝或接缝的张开和闭合情况。正确的安装是确保测缝计能够准确、可靠地工作的关键。本文将详细介绍测缝计的安装方法&#xff0c;以确保测量结果的准确性和可靠性。 上传中 点击输入图片描述&#xff08;最多…