uni-app中组件的基本使⽤
组件的基本使⽤：
uni-app 提供了丰富的基础组件给开发者，开发者可以像搭积⽊⼀样，组合各种组件拼接成⾃⼰的应⽤。
uni-app 中的组件，就像 HTML 中的 div、span、p 等等标签⼀样，⽤于搭建页⾯的基础结构。
更多介绍参见：
昵称代码转换text ⽂本组件的⽤法：
text 组件就是⽤来显⽰⼀个⽂本的，它就类似于 HTML 中的 span 标签。
text 组件的属性如下：
属性说明
属性名类型默认值说明平台差异说明selectable Boolean false⽂本是否可选
space String显⽰连续空格App、H5、⼩程序decode Boolean false是否解码App、H5、⼩程序space 值说明
值说明
ensp中⽂字符空格⼀半⼤⼩
emsp中⽂字符空格⼤⼩
nbsp根据字体设置的空格⼤⼩
注意：
<text> 组件内只⽀持嵌套 <text>，不⽀持其它组件或⾃定义组件，否则会引发在不同平台的渲染差异。
在app-nvue下，只有<text>才能包裹⽂本内容。⽆法在<view>组件包裹⽂本。
decode 可以解析的有 <>&' 。
各个操作系统的空格标准并不⼀致。
除了⽂本节点以外的其他节点都⽆法长按选中。
⽀持 \n ⽅式换⾏。
如果使⽤ <span> 组件编译时会被转换为 <text>。
⽰例代码如下：
<view class="container">
⾸页
<view>
<text>text组件的学习</text>
</view>
<view>
<text selectable="true">text组件中的selectable的属性的学习</text>
</view>
<view>
<text space="nbsp" >组件中的 space属性的学习</text>
</view>
</view>
效果图：
view 视图容器组件的⽤法：
view 视图容器组件，类似于 HTML 中的 div ，是⼀个盒⼦，⼀个容器组件。
如果使⽤，则需注意，包裹⽂字应该使⽤组件。
属性说明
属性名类型默认值说明
hover-class String none指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false指定是否阻⽌本节点的祖先节点出现点击态，也就是阻⽌事件冒泡
hover-start-time Number50按住后多久出现点击态，单位毫秒
hover-stay-time Number400⼿指松开后点击态保留时间，单位毫秒
hover-stop-propagation 属性介绍：
在实际开开发过程中，当⼦⽗组件都有点击事件时，触发⼦组件的点击事件会⼀并触发触发⽗组件的点击事件，如果想阻⽌事件穿透，那么就需要给⼦组件设置hover-stop-propagation 属性
事件冒泡代码：
<template>
<view class="container">
<!--
hover-stop-propagation 属性
在实际开开发过程中，当⼦⽗组件都有点击事件时，触发⼦组件的点击事件会⼀并触发触发⽗组件的点击事件，如果想阻⽌事件穿透，那么就需要给⼦组件设置hove -->
<view class="box2" hover-class="box2-active">
<view class="box3" hover-class="box3-active">view 组件中 hover-stop-propagation 属性的使⽤</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
getData() {
//#ifdef APP-PLUS
//#endif
}
}
}
</script>
<style lang="scss">
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
.box2 {
width: 300px;
height: 300px;
background: yellow;
}
.box2-active {
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background: blue;
}
.box3-active {
background-color: black;
}
}
</style>
事件冒泡效果图：
出现上述情况以后，可以通过⼦组件设置 hover-stop-propagation 属性 来阻⽌事件冒泡，如下代码：
<template>
<view class="container">
<!--
hover-stop-propagation 属性
在实际开开发过程中，当⼦⽗组件都有点击事件时，触发⼦组件的点击事件会⼀并触发触发⽗组件的点击事件，如果想阻⽌事件穿透，那么就需要给⼦组件设置hove -->
<view class="box2" hover-class="box2-active">
<view class="box3" hover-class="box3-active" hover-stop-propagation="true">view 组件中 hover-stop-propagation 属性的使⽤</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
getData() {
//#ifdef APP-PLUS
//#endif
}
}
}
</script>
<style lang="scss">
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
.box2 {
width: 300px;
height: 300px;
background: yellow;
}
.box2-active {
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background: blue;
}
.box3-active {
background-color: black;
}
}
</style>
效果图：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论