uni-app 点击切换class

Posted 2023-04-21

参考技术A <view class="footer">

<view class="footer_item " @click="change_nav(index)" v-for="(item,index) in footer_nav" :key="index">

    <image :src="add_class==index?item.select_icon:item.icon" mode="" v-if="index==2"></image>

    <view :class="'active':add_class==index">item.name</view>

</view>

</view>

export default

    data()

        return

            add_class:'',

        ;

    ,

    methods:

        change_nav(index)

        this.add_class=index

    ,

uni-app 生命周期函数执行顺序

<template>
    <view ref="ref" class="test-container">
        <text>message</text>
        <button @click="addMsg">点击</button>
    </view>
</template>

<script>
    
    import 
        mapState,
        mapMutations
     from 'vuex';
    var key = 0;
    export default 

        data() 
            return 
                message: 1
            
        ,

        computed: 
            
        ,

        methods: 

            addMsg() 
                this.message++
            

        ,
        
        beforeCreate() 
            console.group('beforeCreate 组件创建之前状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        ,
        
        onLoad() 
            console.group('onLoad 状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        ,
        
        onShow() 
            console.group('onShow 状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        ,
        
        onReady() 
            console.group('onReady 状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        ,
        
        onUnload() 
            console.group('onUnload 状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        ,
        
        
        created() 
            console.group('created 组件创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        ,
        
        beforeMount() 
            console.group('beforeMount 组件挂载之前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el));
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        ,
        
        mounted() 
            console.group('mounted 组件挂载完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        ,
        
        beforeUpdate() 
            console.group('beforeUpdate 组件更新之前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        ,
        
        updated() 
            console.group('updated 组件更新完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        ,
        
        beforeDestroy() 
            console.group('beforeDestroy 组件销毁之前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        ,
        
        destroyed() 
            console.group('destroyed 组件销毁完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        
        
    
</script>

<style lang="scss">
    .test-container 
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0upx 40upx;
        button 
            margin-top: 100upx;
        
    
</style>

总结
Page页面生命周期函数执行顺序
beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

刷新数据后
beforeUpdate => updated

作者：悠哉悠哉_8c2a
链接：https://www.jianshu.com/p/9a9ba614408c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。