记住分页的选中状态

例如：当选中第一页的三条数据，翻到第二页再选中两条，再翻回第一页时，第一页的选中状态会恢复未选中状态
目的：翻页之后也要记住之前的选中状态
记住分页选中状态的实例代码：

<template>
    <view class="init-content">
        <view v-if="true">
            <view class="text-area">
                <text class="title">您可以订阅您感兴趣的频道</text>
            </view>
            <!-- 列表块 -->
             <swiper class="swiper-block" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="toSwiper">
                <swiper-item v-for="(tem,i) in totalPage" :key="i">
                    <view class="search-list">
                        <view class="tags">
                            <text v-for="(item,index) in list" :key="index" :class="{active:item.isValid===1}" @click="toSelect(item)">{{item.name}}</text>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
            <view class="btn" @click="toUse">开始使用</view>
        </view>
    </view>
</template>

<script>
    import {typeList} from "@/common/apiUrl.js"
    export default {
        data() {
            return {
                current:1,
                size:10,
                totalPage:0,
                list:[],
                ids:[],
                isShow:true,
                allData:[],
                //滑动效果
                indicatorDots: false,
                autoplay: false,
                interval: 2000,
                duration: 500,

            }
        },
        onShow() {
            this.getList();
            // if(this.api.get_sg('isInit')){
            //     this.isShow = false
            //     this.api.tab_to('/pages/index/index')
            // }else{
            //     this.isShow = true
            //     this.api.set_sg('isInit',true)
            //     this.getList();
            // }
        },
        methods: {
            //小按钮的选中
            toSelect(item) {
                if(item.isValid===1) {
                    this.$nextTick(() => {
                       item.isValid=0
                       this.ids.forEach((tem,i)=>{
                           if(tem==item.id){
                               this.ids.splice(i,1)
                           }
                       })
                    })
                }
                if(item.isValid===0) {
                    item.isValid=1
                    this.ids.push(item.id)
                }
            },
            getList(){
                typeList({current:this.current,size:this.size}).then((res)=>{
                    this.totalPage = res.data.totalPage
                    this.list = res.data.rows
                    //记住选中状态
                    this.list.forEach((item,i)=>{
                        if(this.ids.indexOf(item.id)>-1){
                            item.isValid = 1
                        }
                    })
                })
            },
            //获取所有数据进行匹配
            getAll(callback) {
                typeList({current:1,size:2000}).then((res)=>{
                    this.allData = res.data.rows
                    callback()
                })
            },
            toSwiper(e){
                this.current = e.detail.current+1
                this.getList()
            },
            toUse() {
                let data = []
                this.getAll(()=>{
                    this.allData.forEach((item,index)=>{
                        this.ids.forEach((tem,i)=>{
                            if(item.id==tem){
                                data.push(item)
                            }
                        })
                    })
                    this.api.set_sg('tabList',data,'json')
                    this.api.tab_to('/pages/index/index')
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .init-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 150rpx 110rpx;
        .text-area{
            .title{
                font-size: 22px;
                font-weight: bold;
                color: #333333;
            }
        }
        /* 列表块 */
        .search-list{
            .tags {
                .active{
                    background-color: #186de1;
                    color: #FFFFFF;
                }
                text{
                    max-width: 45%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: inline-block;
                    padding: 12rpx 28rpx;
                    border: 1px solid #186de1;
                    color: #186de1;
                    border-radius: 30rpx;
                    margin: 30rpx 30rpx 0 0;
                    font-family: PingFang-SC-Medium;
                }
            }
        }

        .btn{
            background-color: #186de1;
            color: white;
            font-size: 16px;
            font-weight: bold;
            padding: 28rpx;
            width: 100%;
            text-align: center;
            border-radius: 44rpx;
            margin-top: 70rpx;
        }

        .swiper-block{
            width: 100%;
            padding: 100rpx 0;
            height: 440rpx;
        }
    }

</style>