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>


```