uniapp定时器使用

<template>
    <view>
        <view @tap="stopChange">
            <label v-show="isShowState">停止切换</label>
            <label v-show="!isShowState">开始切换</label>
        </view>
        <view v-show="isShow">页面一</view>
        <view v-show="!isShow">页面二</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isShow: true,     // 页面一 页面二
                isShowState: true,    // true:开始切换 false:停止切换
            }
        },
        onLoad() {
            // 定时切换页面显示隐藏
            let that = this;
            this.changeTimer = setInterval(function(){
                that.changeList();
            },2000)
        },
        methods: {
            // 页面循环展示
            changeList(){
                this.isShow = !this.isShow;
            },
            // 停止循环事件
            stopChange() {
                this.isShowState = !this.isShowState;
                let that = this;
                // 根据状态判断清除和调用定时器
                if(this.isShowState == false){
                    clearInterval(that.changeTimer);    // 清除定时器
                }else{
                    this.isShow = !this.isShow;
                    this.changeTimer = setInterval(function(){        // 重新调用定时器
                        that.changeList()
                    },2000)
                }
            }
        }
    }
</script>

<style lang="scss">

</style>