uniapp 横向导航与内容联动

<template>
    <view>
        <view>
            <scroll-view scroll-x>
                <view :class="tabIndex == index ? 'active':''" v-for="(item,index) in navList"
                :key="index" @click="tapTab(index)">
                    {{ item.text }}
                </view>
            </scroll-view>
            <view>
                <swiper style="height:300px" :current="tabIndex" @change="tabChange">
                    <swiper-item v-for="(items,index) in newList" :key="index">
                        <scroll-view scroll-y>
                            <view>
                                <view>
                                    <view>
                                        <image src="/images/icon-test.png" mode="aspectFit">
                                        </image>
                                    </view>
                                    <text>
                                        1小时
                                    </text>
                                </view>
                                <view>
                                    <text>
                                        听完我会怀念此刻的我们这首歌曲，感恩所有的相遇和陪伴！
                                    </text>
                                </view>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>
<script>
    export
default {
        data() {
            return {
                tabIndex:
                0,
                navList: [{
                    text: '全部'
                },
                {
                    text: '骑行'
                },
                {
                    text: '读书'
                },
                {
                    text: '健身'
                },
                {
                    text: '旅游'
                },
                {
                    text: '新闻'
                },
                {
                    text: '茶艺'
                },
                {
                    text: '汽车'
                },
                {
                    text: '军事'
                }],
                newList: [{
                    title: '全部'
                },
                {
                    title: '骑行'
                },
                {
                    title: '读书'
                },
                {
                    title: '健身'
                },
                {
                    title: '旅游'
                },
                {
                    title: '新闻'
                },
                {
                    title: '茶艺'
                },
                {
                    title: '汽车'
                },
                {
                    title: '军事'
                }]
            }
        },
        methods: {
            tapTab(index) {
                this.tabIndex = index console.log(this.tabIndex)
            },
            tabChange(e) {
                this.tabIndex = e.detail.current
            },
            doLogin() {
                uni.login({
                    provider: 'weixin',
                    success: (loginRes) = >{
                        let code = loginRes.code;
                        let appId = "wx0b4443ef5d92d651";
                        let secret = "5d761ba897fb2c96c0189ff48fd070eb";
                        uni.request({
                            url: "https://api.weixin.qq.com/sns/jscode2session?appid=" + appId + "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code"
                        }).then(data = >{
                            console.log(data.data.openid)
                        })
                    }
                })
            }
        }
    }
</script>
<style>
    page{ height:100%; } .home{ .nav-scroll{ height: 80rpx; border-bottom:1px
    solid #eee; white-space: nowrap; position: fixed; top:var(--window-top);
    left:0; z-index: 10; .item{ font-size: 26rpx; line-height: 80rpx; display:
    inline-block; padding: 0 30rpx; color: #969696; &.active{ font-weight:
    bold; color: red; } } } .content{ margin-top: 100rpx; padding: 20rpx; .new-box{
    margin:10rpx; } .con-msg{ font-size:30rpx; } .con-img{ margin-top:10rpx;
    } .con-img image{ width:100%; border-radius: 6px; } .con-list{ display:
    flex; justify-content: space-between; .list-img-lst{ width:60rpx; height:60rpx;
    overflow: hidden; image{ width:100%; height:100%; } } } } }
</style>