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】努力不是為了感動誰，也不是做給哪些人看，而是讓自己擁有選擇的權利，用自己喜歡的方式過一生。