UniApp基本组件介绍（附有代码实例）
创作时间:
作者:
@小白创作中心
UniApp基本组件介绍（附有代码实例）
引用
CSDN
1.
https://m.blog.csdn.net/qq_62859013/article/details/144847052
UniApp是一个基于Vue.js的跨平台开发框架，可以同时开发出Android、iOS、H5等多个平台的应用。本文将详细介绍UniApp的基本组件及其使用方法，帮助开发者快速上手UniApp开发。
项目介绍
默认情况下，UniApp 创建的项目使用的是 Vue 2。但如果需要使用 Vue 3，可以通过选择适合 Vue 3 的项目模板或通过手动配置来实现。
1. pages.json
用于配置页面路由、导航栏、tabBar 等页面类信息
{
// 页面路由
"pages": [
{
"path": "pages/index/index",
// 页面样式配置
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
}
}
],
// 全局样式配置
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#27BA9B",
"backgroundColor": "#F8F8F8"
},
// tabBar 配置
"tabBar": {
"selectedColor": "#27BA9B",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabs/home_default.png",
"selectedIconPath": "static/tabs/home_selected.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tabs/user_default.png",
"selectedIconPath": "static/tabs/user_selected.png"
}
]
}
}
注意：
- 在创建页面的时候要勾选这个，它会自动帮我们在page.json中注册页面
- tabBar至少要有两个才能正常使用
- globalStyle是全局属性，默认窗口表现
注意：
- static：静态资源只能在这个地方放着
- manifest.json:配置appid、应用名称、logo、版本打包等信息，这是一个可视化的json文件
2. Vue页面内基本组成
Vue2和Vue3代码区别：
在Vue2中template的代码必须由一个view标签包裹，在Vue3中可有多个view包裹
<template>
<view>
内容
</view>
</template>
<template>
<view>
内容
</view>
<view>
内容
</view>
<view>
内容
</view>
</template>
Vue2选项式API和Vue3组合式API：
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
const changeMessage = () => {
message.value = 'Message changed!';
};
onMounted(() => {
console.log('Component mounted');
});
return { message, changeMessage };
}
};
Vue.component('my-component', {
data() {
return {
message: 'Hello, Vue 2!'
};
},
methods: {
changeMessage() {
this.message = 'Message changed!';
}
},
mounted() {
console.log('Component mounted');
}
});
#### 4. text
selectable让H5的文本可复制
user-select让微信小程序的文本可复制
space 可以显示空格
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|------|------|------|------|------|
| selectable | Boolean | false | 文本是否可选 |
| user-select | Boolean | false | 文本是否可选 | 微信小程序 |
| space | String | | 显示连续空格 | 钉钉小程序不支持 |
```html
<text selectable space="emsp"> 复制我 </text>
5. scroll-view滑动条
上下滑动：
<template>
<scroll-view scroll-y class="bigbox" >
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
</scroll-view>
</template>
<script>
// 省略script部分
</script>
<style lang="scss">
.bigbox{
background-color: green;
height: 180px;
width: 180px;
}
.tinybox{
background-color: greenyellow;
height: 60px;
width: 180px;
margin-bottom: 10px;
}
</style>
左右滑动：
<template>
<view class="box01" scr hover-class="hoverBox01" hover-stay-time="1">
</view>
<scroll-view scroll-x class="bigbox" >
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
<view class="tinybox">滑动条</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.box01{
background-color: pink;
height: 150px;
width: 150px;
}
.hoverBox01{
background-color: orange;
height: 260px;
width: 260px;
}
.bigbox{
background-color: green;
height: 180px;
width: 180px;
white-space: nowrap;
}
.tinybox{
background-color: greenyellow;
height: 60px;
width: 80px;
display: inline-block;
margin-bottom: 10px;
}
</style>
6. Swiper
indicator-dots显示圆指示点
indicator-color指示点颜色
indicator-active-color当前选中的指示点颜色
autoplay自动切换默认间隔5s
interval设置自动切换间隔时间ms
vertical设置纵向滑动
circular衔接滑动，播放到末尾自动回到开头
<template>
<view>
<swiper indicator-dots indicator-color="#555555" indicator-active-color="#007aff" circular autoplay interval="2000" >
<swiper-item>1111</swiper-item>
<swiper-item>2222</swiper-item>
<swiper-item>3333</swiper-item>
<swiper-item>4444</swiper-item>
</swiper>
</view>
</template>
<script>
// 省略script部分
</script>
<style>
swiper{
border: 1px;
color: black;
width: 99vw;
height: 200px;
swiper-item{
background-color: orange;
}
// 设置偶数的孩子
swiper-item:nth-child(2n){
background-color: pink;
}
}
</style>
7. image图片
UniApp支持多种图片格式
mode是设置图片的
**mode="widthFix"宽度不变，高度自动变化，保持原图宽高比不变（最常用**）
**mode="aspectFill"**展示短边，将多余的裁剪，保持原始比例，全部充满
**mode="aspectFit"**展示长边，保持原始比例，会空出一块
**mode="scaleToFill "**不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
<template>
<view>
<view class="a1">
<text>分割线--------</text>
<image class="pic" src="../../static/test/a1.jpg" mode="widthFix"></image>
<image class="pic" src="../../static/test/a2.jpg" mode="aspectFill"></image>
<image class="pic" src="../../static/test/a2.jpg" mode="aspectFit"></image>
</view>
</view>
</template>
<script>
// 省略script部分
</script>
<style lang="scss">
.a1{
background-color: gainsboro;
.pic{
background-color: grey;
margin-bottom: 2px;
}}
</style>
8. 跳转页面navigator
加上open-type="reLaunch"就是跳转后返回不了之前的页面
<view>
<navigator url="/pages/test01/test01">点击跳转test01</navigator>
</view>
<view>
<navigator url="/pages/test01/test01" open-type="reLaunch">点击跳转test01，返回不了的那种</navigator>
</view>
9. 表单
9.1 button按钮：
<button size="default" type="primary" plain loading disabled>按钮</button>
type属性：
<button size="default" type="primary">按钮</button>
<button size="default" type="default">按钮</button>
<button size="default" type="warn">按钮</button>
9.2 输入框input：
placeholder-style修改提示框内容
maxlength：最大长度
<input type="text" maxlength="10" placeholder="请输入搜索内容"
placeholder-style="color:orange"/>
输入类型：
密码比较特殊，输入密码使用password属性
<input type="tel" maxlength="10" placeholder="请输入tel" />
<input type="number" maxlength="10" placeholder="只能输入数字" />
<input password maxlength="10" placeholder="请输入密码" />
改变键盘右下角的文字：
confirm-type只有在type="text"时生效
一共有这五个类型分别对应 完成、前往、下一个、搜索、发送
<input type="text" confirm-type="next" maxlength="10" />
热门推荐
在职党员融进去 社区治理“活”起来
如何理解市场趋势并制定投资策略？这些策略如何影响投资结果？
纯水设备的能耗降低途径探索
电商设计字体选择指南：免费与付费字体推荐
首次！关于预制菜！国家层面明确→
自学自媒体如何交流创业：掌握社交媒体营销的技巧
每日廉语 | 乘风破浪
乘风破浪，成功有道：那些激励前行的成语
工程竣工资料软件项目归档指南：从流程到安全防护
在人多的场合讲话总是紧张？可以这样缓解
电脑主机静电防护方法与措施（如何避免电脑主机静电损害）
多元升学：教育改革新引擎，状元林助力基础教育向高质量迈进
燃气灶打火没反应也没声音的原因及解决方法
航天动力深陷困境：2024年财务数据再曝红灯，投资者需谨慎
如何洞察市场空白，打造产品价值？
坚持“受害者有罪论”的人更有可能是虐待狂
最新！31省份人口出生率公布
如何管理销售员的奖励
眼角内眦是什么意思
西瓜起源于炎热干旱的非洲沙漠，却为何偏偏成了含水量最高的水果
西瓜：夏日清凉的水果之王
眼睛血丝多？教你正确选择眼药水
眼里红血丝怎么能去掉
酒驾肇事如何处理？这些预防措施请收好
达奈伊德的悲剧：古希腊神话中的王室血案
输血的指征及原则是什么
深度神经网络——什么是NLP（自然语言处理）？
文竹怎么养护与浇水（文竹浇水的正确方法）
设计合同定金比例的制定原则与参考建议
新能源汽车充电桩的类型有哪些？