uview 滑動切換

```html
<template>
    <view class="content">
        <!--     <u-row justify="space-between" v-for="w,i in 4" :key="i">
            <u-col span="3" v-for="item,index in 4" :key="index">
                <view class="demo-layout bg-purple">{{(index + 1) * 10000}}</view>
            </u-col>
        </u-row> -->
        <!-- 輪播圖 -->
        <u-swiper :list="list2" keyName="image" showTitle :autoplay="false" circular></u-swiper>
        <!-- grid -->
        <u-modal :show="show" title="test" :confirmText="modalConfig.confirmText"
            :showCancelButton="modalConfig.showCancelButton" @confirm="modalChange">
            <slot>
                <u--input v-model="inputValue" border="surround" placeholder="請輸入列數……" type="number"></u--input>
            </slot>
        </u-modal>
        <u-row justify="flex-end">
            <u-col :span="3">
                <u-button text="設置" type="success" class="btnSize" @click="show = true"></u-button>
            </u-col>
        </u-row>
        <u-grid :border="false" :col="gridCol">
            <u-grid-item v-for="item,index in 6">
                <u-icon :customStyle="{paddingTop:20+'rpx'}" name="order" :size="30" color="#909399"></u-icon>
                <text class="grid-text">{{index}}</text>
            </u-grid-item>
        </u-grid>
        <!-- swiper -->
        <view class="home">
            <u-sticky bgColor="#fff">
                <u-tabs :list="list1" :current="swiperConfig.swiperCur" @click="click"></u-tabs>
            </u-sticky>
            
            <swiper class="swiper" style="flex: 1;" :indicator-dots="swiperConfig.indicatorDots"
                :autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration"
                :current="swiperConfig.swiperCur" @change="swiperChange">
                <swiper-item v-for="item,index in list1" :key="index" style="height: 100%;">
                    <scroll-view scroll-y style="height: 100%;width: 100%;">
                        <view class="swiper-item-content">
                            豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊采星馳。台隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿范，襜帷暫駐。十旬休假，勝友如雲；千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區；童子何知，躬逢勝餞。
                            時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。儼驂騑於上路，訪風景於崇阿；臨帝子之長洲，得天人之舊館。層巒聳翠，上出重霄；飛閣流丹，下臨無地。鶴汀鳧渚，窮島嶼之縈回；桂殿蘭宮，即岡巒之體勢。
                            披綉闥，俯雕甍，山原曠其盈視，川澤紆其駭矚。閭閻撲地，鍾鳴鼎食之家；舸艦彌津，青雀黃龍之舳。雲銷雨霽，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色。漁舟唱晚，響窮彭蠡之濱；雁陣驚寒，聲斷衡陽之浦。
                            遙襟甫暢，逸興遄飛。爽籟發而清風生，纖歌凝而白雲遏。睢園綠竹，氣凌彭澤之樽；鄴水朱華，光照臨川之筆。四美具，二難並。窮睇眄於中天，極娛游於暇日。天高地迥，覺宇宙之無窮；興盡悲來，識盈虛之有數。望長安於日下，目吳會於雲間。地勢極而南溟深，天柱高而北辰遠。關山難越，誰悲失路之人？萍水相逢，盡是他鄉之客。懷帝閽而不見，奉宣室以何年？
                            嗟乎！時運不齊，命途多舛。馮唐易老，李廣難封。屈賈誼於長沙，非無聖主；竄梁鴻於海曲，豈乏明時？所賴君子見機，達人知命。老當益壯，寧移白首之心？窮且益堅，不墜青雲之志。酌貪泉而覺爽，處涸轍以猶歡。北海雖賒，扶搖可接；東隅已逝，桑榆非晚。孟嘗高潔，空余報國之情；阮籍猖狂，豈效窮途之哭！
                            勃，三尺微命，一介書生。無路請纓，等終軍之弱冠；有懷投筆，慕宗愨之長風。舍簪笏於百齡，奉晨昏於萬里。非謝家之寶樹，接孟氏之芳鄰。他日趨庭，叨陪鯉對；今茲捧袂，喜托龍門。楊意不逢，撫凌雲而自惜；鍾期既遇，奏流水以何慚？
                            嗚乎！勝地不常，盛筵難再；蘭亭已矣，梓澤丘墟。臨別贈言，幸承恩於偉餞；登高作賦，是所望於群公。敢竭鄙懷，恭疏短引；一言均賦，四韻俱成。請灑潘江，各傾陸111111111111
                        </view>
                    </scroll-view>

                </swiper-item>
            </swiper>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                mainHeight: 200, //全屏或者局部滑動設置的高度
                list1: [{
                    name: '關注',
                    value: "123"
                }, {
                    name: '推薦',
                }, {
                    name: '電影'
                }, {
                    name: '科技'
                }],
                // 輪播圖配置
                swiperConfig: {
                    indicatorDots: false,
                    autoplay: false,
                    interval: 2000,
                    duration: 500,
                    swiperCur: 0
                },
                gridCol: 3,
                inputValue: "",
                // 模態框配置
                modalConfig: {
                    // 確認按鈕的文案
                    confirmText: "好的",
                    // 是否顯示關閉按鈕
                    showCancelButton: true,
                },
                show: false,
                switchValue: false,
                list2: [{
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    title: '昨夜星辰昨夜風，畫樓西畔桂堂東',
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    title: '身無彩鳳雙飛翼，心有靈犀一點通'
                }, {
                    image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    title: '誰念西風獨自涼，蕭蕭黃葉閉疏窗，沉思往事立殘陽'
                }],
            }
        },
        onReady() {
            //獲取屏幕的高度使得全屏左右滑動
            this.mainHeight = uni.getSystemInfoSync().windowHeight;
        },
        onLoad() {

        },
        methods: {
            swiperChange(e) {
                console.log("swiper >>", e)
                this.swiperConfig.swiperCur = e.target.current;
            },
            click(item) {
                console.log('item', item);
                this.swiperConfig.swiperCur = item.index
            },
            modalChange() {
                this.show = false;
                this.gridCol = this.inputValue;
                this.inputValue = ""
                console.log(this.inputValue)
            }
        }
    }
</script>

<style>
    .swiper-item-content{
        padding: 15px;
        line-height: 36px;
    }
    .home {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }

    .bg-purple {
        background: #eeeeee;
        text-align: center;
        padding: 20px 0;
    }

    .btnSize {
        width: 100px;
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
</style>


```