uni-app学习笔记（2）view属性控制css样式

 

uniapp通过标签属性来改变样式

当鼠标按下去的时候，他会变成这个样式

hover-class="box-active"

<template>
    <view>
        <view class="box" hover-class="box-active">盒子</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .box{
        background: #007AFF;
    }
    .box-active{
        background: #4CD964;
    }
</style>

 

如果嵌套两层容器

只想让子容器变的话

使用

 <view class="box" hover-class="box-active" hover-stop-propagation>盒子</view>

hover-stop-propagation  这个属性，来阻止这个冒泡的

 

样式多少秒之后出现，或者多少秒后消失，可以用以下这两种属性控制

hover-start-time    按住后多久出现点击态，单位毫秒

hover-stay-time     手指松开后点击态保留时间，单位毫秒