uniapp--每两秒切换一次页面

需求：每两秒切换一次页面
思路：使用循环定时器，每两秒显示隐藏一次页面，由于操作频繁，为了不影响性能使用了v-show，未使用v-if

1.return中定义isShow: false

2.页面一：v-show="isShow";页面二：v-show="!isShow"

3.事件：

changeList(){
　　　　　　this.isShow = !this.isShow
　　　　}

 

以上就实现了两个页面的显示隐藏，如何实现循环切换两个页面呢，在onLoad()中使用setInterval()循环调用changeList()这个函数即可
4.循环调用事件：

this.changeTimer = setInterval(function(){this.changeList()},2000)

 

写到这里可能有伙伴会在想，可以不可以加一个控制按钮，控制是否自动切换，答案当然是可以的啊
思路：点击按钮清除循环、点击按钮重新调用定时器事件

1.view：

<view class="stopBtn" @tap="stopChange">

　　　　　　<label v-show="isShowState">停止切换</label>

　　　　　　<label v-show="!isShowState">开始切换</label>

　　　　</view>

 

2.return中定义isShowState: false
3.按钮：v-show="isShowState";v-show="!isShowState"
4.事件：

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)
                }
            }

理清项目需求，话不多说直接上完整代码咯

 

<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>

 

【ps】努力不是为了感动谁，也不是做给哪些人看，而是让自己拥有选择的权利，用自己喜欢的方式过一生。