uniapp学习（002 常用的内置组件）

于 2024-09-29 16:08:00 发布
阅读量393 收藏 3
点赞数 22
分类专栏： uniapp 文章标签： uni-app 学习 微信小程序 小程序 前端 node.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/142596003
版权

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第5p-第p10的内容

文章目录

view组件相当于div标签

在这里插入图片描述
在这里插入图片描述

按下松开例子

代码
在这里插入图片描述

页面正常的时候
在这里插入图片描述

按下效果
在这里插入图片描述

松开效果（恢复原样）
在这里插入图片描述

冒泡例子

代码
在这里插入图片描述
样式
在这里插入图片描述
正常时候
在这里插入图片描述

点击时都发生了变化
在这里插入图片描述

松开时（恢复原样）
在这里插入图片描述

我们只想让子元素进行改变，父元素不变
添加阻止属性即可
在这里插入图片描述

在这里插入图片描述

ps:在 Vue 模板中，可以直接使用 .stop 修饰符来阻止事件冒泡。
如：

<button @click.stop="childClick">Click Me</button>

text组件 相当于span标签

在这里插入图片描述

使用text组件可以让文本可选 但是要添加属性 selectable=‘true’ 其中 =‘true’可以忽略，只写selectable
在这里插入图片描述
在这里插入图片描述
可以添加多个空格的空间
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

scroll-view

在这里插入图片描述

纵向滚动

在这里插入图片描述

出现滚动条
在这里插入图片描述

横向滚动

在这里插入图片描述

在这里插入图片描述

不自动换行 white-space:nowrap;
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

swiper

在这里插入图片描述

例子

在这里插入图片描述

100vw代表全屏宽度
在这里插入图片描述

100vh代表屏幕的高度
在这里插入图片描述

查看时会多出一块，因为边框也占了位置，我们添加box-sizing: border-box; 就可以解决
在这里插入图片描述
间隔换颜色
在这里插入图片描述
在这里插入图片描述

加指示点
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

image和swiper配合

在这里插入图片描述

一般图片都放在static文件夹里
在这里插入图片描述
这里我们存储4张不同类型的图片

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

aspectFill是最常用的格式，对多余的区域进行了裁剪
在这里插入图片描述

在这里插入图片描述

也可以添加网络图片
在这里插入图片描述

展示效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

navigator 路由导航

在这里插入图片描述

例子

在这里插入图片描述
在这里插入图片描述

点击跳转到其他页面
在这里插入图片描述

跳转类型

在这里插入图片描述

在这里插入图片描述

reLaunch 跳转后销毁之前的页面（无法返回上一页）

在这里插入图片描述

点击跳转到其他小程序 设置target

在这里插入图片描述

在这里插入图片描述

给图片加上跳转（包裹住image即可）

在这里插入图片描述

button按钮

在这里插入图片描述

在这里插入图片描述

例子

在这里插入图片描述
在这里插入图片描述

提交时可以让loading变成true 提交后 让其变成false （这只是视觉上的loading）
在这里插入图片描述

input输入框

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

默认占位符 placeholder

在这里插入图片描述

在这里插入图片描述

也可以使用class在这里插入图片描述

设置输入类型

在这里插入图片描述

用手机使用ip地址进行查看

如果手机看不到 记得把电脑防火墙5173端口放开 或者整个防火墙关掉（不推荐）
在这里插入图片描述

在这里插入图片描述
也可以给手机键盘右下角的文字进行设置
ps:类型必须是text时才可以
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

wang_book
关注
专栏目录
uniapp 在线预览pdf
09-18
uniAPP并没有内置的PDF预览组件，但我们可以借助第三方库或者浏览器的内置能力来实现。 1. 使用第三方库： 一个常用的第三方库是`html2canvas`和`jspdf`，它们可以帮助我们把PDF内容转换成图片或HTML，再在uniAPP...
unibest最好用的uniapp开发模板，跨端快速启动模板，使用VS Code开发，具有代码提示、自动格式化、统一配置、代码片
02-03
unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件
uniapp 在线预览pdf文件
04-11
对于PDF预览功能，uniapp并没有内置的API，但我们可以借助一些第三方库和插件来实现。 1. **使用HTML5的`<iframe>`标签**： 在Web开发中，一个常用的方法是通过`<iframe>`标签嵌入PDF文件。uniapp支持在H5页面上...
uniapp 底部导航设置
12-14
在uniapp中，底部导航（Bottom Navigation）是应用中常用的一种布局方式，它通常包含多个可切换的选项卡，用于展示不同的功能模块。本篇将详细介绍如何在uniapp中进行底部导航的设置。 首先，uniapp是基于Vue.js...
uniapp-模板：uniapp
02-14
3. 组件库：uniapp提供了丰富的内置组件，如view、text、button等，这些组件在模板中被广泛使用，帮助开发者快速搭建界面。 4. 脚手架工具：uniapp命令行工具（uniapp-cli）可以帮助开发者快速创建、初始化、构建和...
Uniapp时间戳转时间显示/时间格式
qq_44866810的博客
09-24 494
【代码】Uniapp时间戳转时间显示/时间格式。
创意实现！在uni-app小程序商品详情页轮播中嵌入视频播放功能
weixin_44590591的博客
09-25 1059
通过uni-app框架实现商城小程序商品详情页的视频与图片轮播功能，以提升用户体验和增加商品吸引力。通过展示商品视频和图片，用户可以更全面地了解商品细节，从而提高购买决策的便利性和满意度。这种功能适用于各类商品，如服装、家具、电子产品等。通过本文的步骤，您将学会如何在商城小程序中利用uni-app框架实现商品详情页的视频与图片轮播功能
uniapp生物识别示例（人脸识别、指纹识别）
weixin_59685936的博客
09-25 776
uniapp生物识别示例（人脸识别、指纹识别）
uni-app - - - - -vue3使用i18n配置国际化语言
Dark_programmer的博客
09-25 412
uni-app - - - - -vue3使用i18n配置国际化语言
uni-app进度条
ctf_0226的博客
09-24 610
【代码】uni-app进度条。
uniapp map设置高度为100%后,会拉伸父容器的高度
GoppViper的博客
09-23 803
在 UniApp 中，当给 map 组件设置高度为 100% 时确实可能会拉伸父容器的高度，这通常是因为 100% 的高度是相对于父元素的高度计算的，而如果父元素没有明确的高度定义，就可能出现这种情况。
uni-app - - - - - 实现锚点定位和滚动监听功能（滚动监听功能暂未添加，待后续更新）
Dark_programmer的博客
09-25 492
uni-app - - - - - 实现锚点定位和滚动监听功能（滚动监听功能暂未添加，待后续更新）
uniapp自定义底部tabBar
最新发布
qq_53024519的博客
09-26 310
在一个非tabbar页面，想要有底部导航效果，故自定义效果，系统原底部导航栏仍在正常使用
uniapp打字效果流式输出
呼叫6945的博客
09-23 694
这样就能实现一个简单的打字效果，文本会逐字流式输出。的时间来控制打字速度。
uniapp视频禁止用户推拽进度条并保留进度条显示的解决方法——方案一
Jiaberrr的博客
09-25 479
今天给大家分享一个在uniapp中播放视频时的小技巧之一：如何禁止用户推拽进度条，同时又不隐藏进度条。
uniapp微信小程序遮罩层u-popup禁止底层穿透
sjp991012的博客
09-24 444
【代码】uniapp微信小程序遮罩层u-popup禁止底层穿透。
uniapp view设置当前view之外的点击事件
GoppViper的博客
09-24 581
这些方法可以根据你的具体需求进行选择和调整，以实现在 UniApp 中为view设置当前视图之外的点击事件。希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。
uni-app进行微信小程序开发，快速上手
zhzjn的博客
09-24 1277
IDE微信小程序开发工具下载 / 稳定版更新日志 (qq.com)安装流程打开HBuilderX 点击这个logo打开终端 然后 下载一下终端插件。
uniapp webview清理缓存
骨子里的偏爱
09-24 534
【代码】uniapp webview清理缓存。
uniapp中选择用什么组件
06-08
在Uniapp中，你可以选择使用各种内置组件或第三方组件来实现你的需求。常用的内置组件包括基础组件（如view、text、button等）、表单组件（如input、radio、checkbox等）、列表组件（如list、swiper、scroll-view等）、媒体组件（如image、audio、video等）、画布组件（如canvas）等等。 对于选择使用哪些组件，要根据具体的业务需求来决定。如果你需要实现一个列表页，可以选择使用list组件；如果你需要实现一个轮播图，可以选择使用swiper组件；如果你需要实现一个表单页，可以选择使用input、radio、checkbox等组件。 此外，Uniapp还支持使用第三方组件，你可以在官方插件市场或GitHub上找到适合自己的组件。常用的第三方组件包括vant-weapp、uview-ui、color-ui等等。这些组件一般都提供了丰富的功能和样式，可以大大提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值