uni-app代码简单案例、笔记、创意收集

1.关闭页面广告。

<template>
    <view class="content">
        <view class="box" v-show="isDisplay">
            <image @tap="close" class="image" src="../../static/close.png" mode=""></image>
            <view class="clear">
                
            </view>
            <view class="gif-box">
                <image src="../../static/walk.jpg" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isDisplay:true
            }
        },
        methods: {
            close () {  
                setTimeout(() => {
                    this.isDisplay = false
                },800)
            }
        }
    }
</script>

<style lang="scss">
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .box {
        background-color: #808080;
        width: 600upx;
        height: 300upx;
        
        .clear {
            clear: both;
        }
        .gif-box {
            image {
                width: 600upx;
                height: 270upx;
            }
        }
        .image {
            float: right;
            height: 40upx;
            width: 40upx;
        }
    }
    
</style>

---

也可以替换成在点击关闭的时候直接跳转到新的页面（这个大家都有体会吧，现在很多广告右上角的关闭按钮都是虚假的，一点击关闭根本不会关闭，只会跳转...）。

            close () {  
                setTimeout(() => {
                    //this.isDisplay = false
                    uni.navigateTo({
                        url:"../test/test" //要在pages.json提前配置好页面
                    })
                },800)
            }

还可以用原生的js实现关闭效果：

<template>
    <view class="content">
        <view id="box">
            <view class="floatBox">
                <image @tap="close()" src="../../static/close.png" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        methods: {
            close () {  
                let box = document.getElementById('box')
                box.style.display = 'none'
            }
        }
    }
</script>

<style>
    #box {
        background-color: #808080;
        width: 300upx;
        height: 300upx;
        
    }
    .floatBox {
        float: right;
        
    }
    .floatBox image {
        width: 50upx;
        height: 50upx;
    }
</style>

1.函数的三种写法表达形式：全写 | 箭头函数 | 简写

<view class="box" @tap="clickBox()"></view>

methods: {
            clickBox:function() {} //全写
            clickBox:() => {} //箭头函数写法
            clickBox () {} //简写
        }

2.简单的样式交互实现,鼠标点击区域，区域变色。

<template>
    <view class="container">
        <view class="box" :class="{'acitve':isActive}" @tap="clickBox()"></view>
            
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                isActive:false,
            }
        },
        methods: {
            clickBox:function(){
                this.isActive = true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        height: 750upx;
        width: 750upx;
        background-color: #007A4E;
    }
    .acitve {
        background-color: #007AFF;
        height: 750upx;
        width: 750upx;
    }
</style>

---