The use of components of uni-app
Component official website
view component
view (similar to div)
- hover-class
- Set a class name, that is, when clicking, the style of the class name is triggered, the default is none
- hover-stop-propagation
- hover-start-time
- After pressing, according to the set time, after the time is up, load the corresponding style
- hover-stay-time Number 400
- Click state retention time after the finger is released, in milliseconds
<template>
<view>
<view class="box1" hover-class="box1-active">我是view组件
<view class="box2" hover-class="box2-active" hover-stop-propagation hover-start-time="1000" hover-stay-time="1000">
我是子组件
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.box1 {
width: 200px;
height: 200px;
background: orange;
}
.box2 {
width: 100px;
height: 100px;
background: red;
}
.box1-active{
background: blue;
}
.box2-active{
background: yellow;
}
</style>
- Effect
When box1 is clicked, the corresponding style 1
is triggered. When box2 is clicked, the corresponding style 2 is triggered
Basic Content Components
text component
- Text component, used to store text
- Effect
progress progress bar component
- The component that displays the progress bar
- Effect
Basic form components
button
<template>
<view>
<button type="default" plain>我是按钮</button>
<button size="mini" type="primary" plain>我是按钮2</button>
<button size="mini" type="primary" loading plain>我是按钮3</button>
</view>
</template>
- Effect
media component
image component
<template>
<view>
<image src="./img/222.png" ></image>
<image src="./img/222.png" mode="aspectFill"></image>
<image src="./img/222.png" mode="aspectFit"></image>
</view>
</template>
- Effect
