contenido
El uso de componentes de uni-app
Sitio web oficial del componente
ver componente
ver (similar a div)
- clase flotante
- Establezca un nombre de clase, es decir, al hacer clic, se activa el estilo del nombre de la clase, el valor predeterminado es ninguno
- hover-stop-propagación
- Detener eventos burbujeantes
- hover-start-time
- Después de presionar, de acuerdo con el tiempo establecido, después de que se acabe el tiempo, cargue el estilo correspondiente
- hover-stay-time Número 400
- Tiempo de retención del estado del clic después de soltar el dedo, en milisegundos
<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>
- Efecto
Cuando se hace clic en el cuadro 1, se activa el estilo 1 correspondiente
. Cuando se hace clic en el cuadro 2, se activa el estilo 2 correspondiente
Componentes de contenido básico
componente de texto
- Componente de texto, utilizado para almacenar texto.
- Efecto
componente de la barra de progreso
- El componente que muestra la barra de progreso
- Efecto
Componentes básicos del formulario
botón
<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>
- Efecto
componente de medios
componente de imagen
<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>
- Efecto
