【报Bug】轮播样式错乱

示例代码：

<template>  
    <view class="content normalFontModel" :class="{bigFontModel:isBig==true}">  
        <!-- <view class="tips">大字模式</view> -->  
        <view class="nav-box">  
            <view class="status_bar"></view>  
            <view class="head-top">  
                <view class="adress" style="color: #fff;">  
                    <uni-data-picker :placeholder="currmentCity" popup-title="请选择所在地区" :border=false  
                        :localdata="addressList" v-model="address" @change="onchange" @nodeclick="onnodeclick"  
                        @popupopened="onpopupopened" @popupclosed="onpopupclosed">  
                    </uni-data-picker>  
                    <!-- <view class="scan" @click="showBox" :class="{ show: codeShow }"></view> -->  
                </view>  
                <image class="font-title" src="../../static/index/font.png" mode=""></image>  
                <view class="">  
                    <image src="../../static/index/search.png" mode="" style="width: 34upx;height: 34upx;"  
                        @tap="goSearch()"></image>  
                    <image src="../../static/index/more.png" mode=""  
                        style="width: 34upx;height: 26upx;margin-left: 38upx;" @tap="goColumn()"></image>  
                </view>  
            </view>  
            <!-- 导航切换 -->  
            <swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'  
                :currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight'  
                :swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor'  
                :swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow"  
                :currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"  
                :currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"  
                :currentSwiperLineActiveBg="currentSwiperLineActiveBg"  
                :currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" swiperTabList.length >= 1 "  
                @change="CurrentTab">  
            </swiperNavBar>  
        </view>  
        <view class="swiperCont">  
            <swiper class="swiper" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx" @change="SwiperChange">  
                <swiper-item class="swiperItem" v-for="(item,index) in swiperTabList" :key='index'>  
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="ReachBottom"  
                        @refresherrefresh="onRefresh">  
                        <view class="bg" :class="[item.name=='学党史'?'bg3':'']" v-show="swiperTabIdx==0||item.name=='学党史'">  
                            <view class="swiper">  
                                <view class="font-box" v-show="item.name=='学党史'">  
                                    <image src="../../static/index/fontBg.png"></image>  
                                </view>  
                                <view class="banner-box">  
                                    <swiper indicator-dots :autoplay="true" circular :interval="5000" :duration="1000"  previous-margin="0" next-margin="0">  
                                        <!-- @change='bannerChanges' -->  
                                        <swiper-item class="swiper-item" v-for="(item, index) in bannerList"  
                                            :key="index" @tap="goDetails(item.id)">  
                                            <image :src="item.show_images_text[0]"></image>  
                                            <view class="swiper-tag flexWarpColumn">  
                                                <view class=""><text class="title">{{item.title_type_text}}</text>  
                                                </view>  
                                                <view class="content notic-title">{{item.title}}</view>  
                                            </view>  
                                        </swiper-item>  
                                    </swiper>  
                                    <!-- <view class="dots-box">  
                                        <view class="dots-item" :class="{currDots:currmentDotIndex==index}"  
                                            v-for="(item,index) in bannerList"></view>  
                                    </view> -->  
                                </view>  
                            </view>  
                        </view>  
                        <block v-if="swiperTabIdx==0">  
                            <!-- 新聞 -->  
                            <view class="news flexWarpColumn">  
                                <view class="news-item" v-for="(item, index) in newsList" :key="index"  
                                    @tap="goDetails(item.id)">  
                                    <view class="box"></view>  
                                    <view class="cont notic-title">{{item.title}}</view>  
                                </view>  
                            </view>  
                            <view class="notic">  
                                <image src="../../static/index/tag.png" mode="" class="img" @tap="goWeekly()"></image>  
                                <view class="notic-item " v-for="(item,index) in zxList" :key="index"  
                                    @tap="goDetails(item.id)">  
                                    <view class="notic-left flexWarpColumn">  
                                        <view class="notic-title"><text class="hot">热</text>{{item.title}}</view>  
                                        <view class="dis-f">  
                                            <text>{{item.origin}}</text>  
                                            <text>{{item.view}}观看</text>  
                                            <text>{{item.selftime_text}}</text>  
                                        </view>  
                                    </view>  
                                    <image class="img-right" :src="item.show_images_text[0]" mode=""></image>  
                                </view>  
                            </view>  
                            <!-- 专题专栏 -->  
                            <view class="specialColumn">  
                                <view class="special-title">专题专栏</view>  
                                <scroll-view scroll-x="true">  
                                    <view class="list_item">  
                                        <view class="list_item_img" v-for="(item1,index) in service_list" :key="index"  
                                            @tap="goDetails(item1.id)">  
                                            <image :src="item1.show_image_text" mode="aspectFill"></image>  
                                        </view>  
                                    </view>  
                                </scroll-view>  
                            </view>  
                        </block>  
                        <block v-for="(item,index) in noticList" :key="index">  
                            <view class="notics" v-if="item.show_type==0" @tap="goDetails(item.id)">  
                                <view class="notic-items flexWarpColumn">  
                                    <view class="notic-title">{{item.title}}</view>  
                                    <!-- <image class="img-right" :src="item.img" mode=""></image> -->  
                                    <view class="notic-left ">  
                                        <view class="dis-f">  
                                            <text>{{item.origin}}</text>  
                                            <text>{{item.show_num}}观看</text>  
                                            <text>{{item.selftime_text}}</text>  
                                        </view>  
                                    </view>  
                                </view>  
                            </view>  
                            <view class="notics" v-if="item.show_type==1" @tap="goDetails(item.id)">  
                                <view class="notic-items flexWarpColumn">  
                                    <view class="notic-title"><text class="hot"  
                                            v-if="item.isHot">{{item.title_type_text}}</text>{{item.title}}</view>  
                                    <image class="img-right" :src="item.show_images_text[0]" mode=""></image>  
                                    <view class="notic-left ">  
                                        <view class="dis-f">  
                                            <text>{{item.origin}}</text>  
                                            <text>{{item.show_num}}观看</text>  
                                            <text>{{item.selftime_text}}</text>  
                                        </view>  
                                    </view>  
                                </view>  
                            </view>  
                            <view class="notics" v-if="item.show_type==2" @tap="goDetails(item.id)">  
                                <view class="notic-items flexWarpColumn">  
                                    <view class="notic-title"><text class="hot"  
                                            v-if="item.isHot">{{item.title_type_text}}</text>{{item.title}}</view>  
                                    <view style="display: flex;justify-content: space-between;align-items: center;">  
                                        <image style="width: 30%;height: 150upx;border-radius: 8upx;"  
                                            v-for="(item1,index1) in item.show_images_text" :key="index1" :src="item1"  
                                            mode="">  
                                        </image>  
                                    </view>  
                                    <view class="notic-left ">  
                                        <view class="dis-f">  
                                            <text>{{item.origin}}</text>  
                                            <text>{{item.show_num}}观看</text>  
                                            <text>{{item.selftime_text}}</text>  
                                        </view>  
                                    </view>  
                                </view>  
                            </view>  
                            <view class="notic" v-if="item.show_type==3" @tap="goDetails(item.id)">  
                                <view class="notic-item ">  
                                    <view class="notic-left flexWarpColumn">  
                                        <view class="notic-title">{{item.title}}</view>  
                                        <view class="dis-f">  
                                            <text>{{item.origin}}</text>  
                                            <text>{{item.show_num}}观看</text>  
                                            <text>{{item.selftime_text}}</text>  
                                        </view>  
                                    </view>  
                                    <image class="img-right" :src="item.show_images_text[0]" mode=""></image>  
                                </view>  
                            </view>  
                        </block>  
                        <uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />  
                        <empty-warp v-if="showEmpty"></empty-warp>  
                    </scroll-view>  
                    <!-- 公共 -->  
                </swiper-item>  
            </swiper>  
        </view>  
        <!-- 结束 -->  
    </view>  
</template>  

<script>  
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'  
    import emptyWarp from '@/components/empty-warp.vue'  
    import swiperNavBar from "../../components/swiperNavBar.vue";  
    export default {  
        components: {  
            uniLoadMore,  
            emptyWarp,  
            swiperNavBar  
        },  
        data() {  
            return {  
                scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素  
                swiperTabList: [{name:"首页",id:''}], //导航列表  
                swiperTabIdx: 0,  
                swiperCurrentSize: '28rpx', //导航的字体大小  
                swiperColor: 'rgba(255,255,255,.7)', //导航栏字体未选中前颜色  
                swiperCurrentColor: '#fff', //选中当前导航栏字体颜色  
                currentSwiperWidth: '18%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）  
                currentSwiperHeight: 70, //当前导航的高度度 rpx px  
                mainHeight: 200, //全屏或者局部滑动设置的高度  
                currentSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）  
                currentSwiperLineActiveBg: '#fff', //当前选中的导航栏线条颜色  
                currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px  
                currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px  
                currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果  
                codeShow: false,  
                isBig: false,  
                navList: [],  
                currmentIndex: 0,  
                autoplay: true, //是否自动切换  
                interval: 5000, //自动切换时间间隔  
                duration: 1000, //滑动动画时长  
                bannerList: [], //轮播图  
                service_list: [],  
                newsList: [],  
                zxList: [],  
                page: 1,  
                size: 10,  
                news_category_id: '',  
                showEmpty: true,  
                showLoadStatus: false,  
                more: true,  
                contentText: {  
                    contentdown: '上拉加载更多~',  
                    contentrefresh: '加载中...',  
                    contentnomore: '已经到底了~~'  
                },  
                status: 'loading',  
                noticList: [],  
                addressList: [],  
                address: "重庆市",  
                area_id: "",  
                currmentCity: '获取中',  
                currmentDotIndex: 0, //当前轮播点的下标  
            }  
        },  
        onReady() {  
            this.mainHeight = uni.getSystemInfoSync().windowHeight; //获取屏幕的高度使得全屏左右滑动  
            //console.log(this.mainHeight)  

        },  
        onShow() {  
            this.isBig = uni.getStorageSync('isBig');  
            console.log(this.isBig)  
        },  
        onLoad() {  
            this.getLocation();  
            this.getNavList();  
            this.getHomeData();  
            this.getArea();  
        },  
        // onReachBottom() {  
        //  console.log('触底')  
        //  if (this.more) {  
        //      this.getList()  
        //  }  
        // },  
        // 下拉刷新  
        onPullDownRefresh: function() {  
            this.freshList();  
            this.$tools.loadIng()  
            setTimeout(() => {  
                uni.stopPullDownRefresh()  
            }, 500)  
        },  
        methods: {  
            goWeekly() {  
                uni.navigateTo({  
                    url: '/pages/index/weekly'  
                })  
            },  
            goSearch() {  
                uni.navigateTo({  
                    url: '/pages/index/searchList'  
                })  
            },  
            goColumn() {  
                uni.navigateTo({  
                    url: '/pages/index/column?swiperTabIdx=' + this.swiperTabIdx  
                })  
            },  
            onRefresh() {  
                console.log('下拉')  
            },  
            ReachBottom() {  
                console.log('触底')  
                if (this.more) {  
                    this.getList()  
                }  
            },  
            //tab点击事件 自行完善需要的代码  
            CurrentTab: function(index, item) {  
                this.swiperTabIdx = index;  
                this.scrollIntoView = Math.max(0, index - 1);  
                this.news_category_id = this.navList[index].id  
                // uni.pageScrollTo({  
                //  scrollTop: 0,  
                //  duration: 1000  
                // });  
                this.freshList();  
            },  
            //滑动事件  自行完善需要的代码  
            SwiperChange: function(e) {  
                //console.log(e.detail.current);  
                this.swiperTabIdx = e.detail.current;  
                this.scrollIntoView = Math.max(0, e.detail.current - 1);  
                this.news_category_id = this.navList[this.swiperTabIdx].id  
                this.freshList();  
            },  
            bannerChanges(e) {  
                this.currmentDotIndex = e.detail.current  
                console.log(this.currmentDotIndex)  
            },  
            tabsChange(i) {  
                this.tabs.current = i;  
            },  
            getNavList() {  
                this.$request.post(this.$api.categorylist, {  
                    token:uni.getStorageSync('token')  
                }, {  

                }).then(res => {  
                    if (res.code == 1) {  
                        let {  
                            data = {}  
                        } = res;  
                        this.navList.push(...data)  
                        this.swiperTabList.push(...data)  
                        this.news_category_id = this.navList[0].id  
                        this.getList();  
                    }  
                })  
            },  
            getHomeData() {  
                this.$request.post(this.$api.homeData, {}, {  

                }).then(res => {  
                    if (res.code == 1) {  
                        let {  
                            data = {}  
                        } = res;  
                        this.bannerList = data.home_top_list  
                        this.newsList = data.home_list  
                        this.service_list = data.zt_list  
                        this.zxList = data.zx_list  
                    }  
                })  
            },  
            freshList() {  
                this.page = 1  
                this.more = true  
                this.status = 'loading'  
                this.noticList = []  
                this.getList();  
            },  
            getLocation() {  
                let that = this  
                uni.getLocation({  
                    type: 'gcj02',  
                    geocode: true,  
                    success: function(res) {  
                        console.log(res)  
                        that.currmentCity = res.address.city  
                        // console.log(that.addressList.length);  
                        // that.area_id=that.addressList.find(item=>{  
                        //  if(item.text===that.currmentCity) return  item  
                        //  else  if (item.children  && item.children.length>0)  
                        //  return item.children.find(el=> el.text ===  that.currmentCity)  
                        //  })?.value|| null  
                        // let obj=that.addressList.find(item=>{  
                        //  return item.children.find(el=> el.text ===  that.currmentCity)?.value|| null  
                        // })  
                        // that.area_id=obj.children.find(el=> el.text ===  that.currmentCity)?.value|| null  
                        // console.log(that.area_id)  
                        // that.getNavList();  
                    },  
                    fail(res) {  
                        that.$tools.showToast('请打开GPS后重新进入app')  
                    },  
                    complete(res) {  
                        // console.log(res);  
                    }  
                });  
            },  
            getList() {  
                console.log('进来了');  
                this.$tools.loadIng()  
                let self = this  
                console.log(this.area_id);  
                let requestData = {  
                    page: this.page++,  
                    pagesize: this.size,  
                    news_category_id: this.news_category_id,  
                    area_id: this.area_id,  
                    token:uni.getStorageSync('token')  
                }  
                console.log(requestData);  
                this.$request.post(this.$api.newList, requestData, {  

                }).then(res => {  
                    if (res.code == 1) {  
                        let {  
                            data = {}  
                        } = res;  
                        let newArray = data.data  
                        if (newArray.length == 0 && self.page == 2) {  
                            self.showEmpty = true  
                            self.showLoadStatus = false  
                            self.more = false // 不能再次请求了  
                            return false;  
                        } else {  
                            self.showLoadStatus = true  
                            self.more = true  
                            self.showEmpty = false  
                            self.status = 'loading'  
                        }  
                        if (newArray.length < this.size) { // 说明没有更多数据  
                            self.status = 'noMore'  
                            self.more = false  
                            self.showEmpty = false  
                        }  
                        self.noticList = self.noticList.concat(newArray);  
                        console.log(self.noticList)  
                    }  
                }).finally(() => {  
                    setTimeout(() => {  
                        this.$tools.hideLoading()  
                    }, 1000)  
                })  
            },  
            //切换  
            changeNav(index) {  
                this.currmentIndex = index  
            },  
            showBox() {  
                this.codeShow = !this.codeShow;  
            },  
            goDetails(newsId) {  
                console.log(newsId)  
                uni.navigateTo({  
                    url: '/pages/index/articleDetails?newsId=' + newsId  
                })  
            },  
            getArea() {  
                this.$request.post(this.$api.areatree, {  
                    token:uni.getStorageSync('token')  
                }, {  

                }).then(res => {  
                    if (res.code == 1) {  
                        let {  
                            data = {}  
                        } = res;  
                        this.recursion(data, this.addressList)  
                    }  
                })  
            },  
            recursion(dataSource, target) {  
                dataSource.forEach(item => {  
                    let obj = {  
                        value: item.id,  
                        pid: item.pid,  
                        text: item.name,  
                        children: []  
                    }  
                    if (item.childlist) {  
                        this.recursion(item.childlist, obj.children)  
                    }  
                    target.push(obj)  
                })  
            },  
            onnodeclick(e) {  
                console.log(e);  
            },  
            onpopupopened(e) {  
                console.log('popupopened');  
            },  
            onpopupclosed(e) {  
                console.log('popupclosed');  
            },  
            onchange(e) {  
                console.log('---------onchange:', this.address);  
                this.area_id = e.detail.value[e.detail.value.length - 1].value  
                this.freshList();  
            }  
        }  
    }  
</script>  

<style lang="scss">  
    .normalFontModel {  
        .selected-area {  
            color: #333333;  
        }  

        .tips {  
            font-size: 24upx;  
            text-align: center;  
        }  

        .nav-box {  
            background: url(../../static/index/navBG.png) no-repeat center/ 100% 100%;  
            padding-bottom: 20upx;  
            position: sticky;  
            top: 0;  
            z-index: 999;  

            .head-top {  
                padding: 20upx 30upx;  
                @include flex-row;  

                .adress {  
                    font-size: 28upx;  
                    font-family: Source Han Sans CN;  
                    font-weight: 400;  
                    color: #FFFFFF;  
                    @include flex-start;  

                    image {  
                        width: 24upx;  
                        height: 20upx;  
                        margin-left: 5upx;  
                    }  

                    .scan {  
                        margin-left: 10upx;  
                        margin-top: 6upx;  
                        width: 0;  
                        height: 0;  
                        border-width: 14upx 14upx 0;  
                        border-style: solid;  
                        border-color: #fff transparent transparent;  
                    }  

                    .show {  
                        margin-left: 10upx;  
                        margin-top: -10upx;  
                        width: 0;  
                        height: 0;  
                        border: 14upx solid;  
                        border-color: transparent transparent #fff transparent;  
                    }  
                }  

                .font-title {  
                    width: 200upx;  
                    height: 55upx;  
                }  
            }  

            scroll-view {  
                display: flex;  
                flex-direction: row;  
                flex-wrap: nowrap;  
                white-space: nowrap;  
            }  
        }  

        .bg3 {  
            background: url(/static/index/bg3.jpg) no-repeat top/ 100% 100% !important;  
            height: 560upx !important;  
            padding-top: 10upx !important;  

            .font-box {  
                width: 728upx;  
                height: 112upx;  
                margin: auto;  
            }  
        }  

        .bg {  
            background: url(../../static/index/bg.png) no-repeat center/ 100% 100%;  
            height: 440upx;  
            overflow: hidden;  
            swiper {  
                // position: relative;  
                z-index: 2;  
                padding: 40upx 25upx;  
                width: calc(100% - 50upx);  
                height: 360rpx !important;  
                background: transparent;  
                overflow: hidden;  
                backface-visibility: hidden; //......1  
                transform: translate3d(0, 0, 0);//.....2  
                -webkit-backface-visibility: hidden;//......3  
                -webkit-transform: translate3d(0, 0, 0);//......4  
                /deep/ .uni-swiper-wrapper{  
                    overflow: hidden !important;  
                }  
                .swiper-item {  
                    width: 100%;  
                    height: 100%;  
                    border-radius: 20rpx;  
                    position: relative;  
                    overflow: hidden;  
                    image {  
                        width: 100%;  
                        height: 100%;  
                        border-radius: 20rpx;  
                        overflow: hidden;  
                    }  

                    .swiper-tag {  
                        position: absolute;  
                        bottom: 5%;  
                        padding: 32upx;  

                        .title {  
                            font-size: 24upx;  
                            font-family: PingFang SC;  
                            font-weight: 400;  
                            color: #FFFFFF;  
                            background-color: #CA1A1C;  
                            border-radius: 8upx;  

                            padding: 2upx 12upx;  
                        }  

                        .content {  
                            margin-top: 14upx;  
                            font-size: 32upx;  
                            font-family: PingFang SC;  
                            font-weight: 600;  
                            color: #FFFFFF;  
                            opacity: 1;  
                        }  
                    }  

                }  
            }  
            .banner-box {  
                overflow: hidden;  
                /deep/ .uni-swiper-dots {  
                    // 指示点整个区域的位置  
                    top: 320rpx;  
                }  

                /deep/ .uni-swiper-dot {  
                    // 指示点元素默认样式  
                    width: 18upx !important;  
                    height: 18upx !important;  
                    background: url(../../static/index/xingxing.png) no-repeat center/ 100% 100% !important;  
                    opacity: .3;  
                }  

                /deep/ .uni-swiper-dot-active {  
                    // 指示点元素激活（当前选中）状态样式  
                    width: 18upx !important;  
                    height: 18upx !important;  
                    opacity: 1;  
                }  
            }  
        }  

        .news {  
            padding: 24upx 36upx;  

            .news-item {  
                margin-bottom: 34upx;  
                @include flex-start;  
                align-items: center;  

                .box {  
                    width: 16upx;  
                    height: 16upx;  
                    min-width: 16upx;  
                    background-color: #CA1A1C;  
                    border-radius: 50%;  
                    opacity: 1;  
                    margin-right: 20upx;  
                }  

                .cont {  
                    font-size: 32upx;  
                    font-family: PingFang SC;  
                    font-weight: 600;  
                    color: #333333;  
                    opacity: 1;  
                }  
            }  
        }  

        .notics {  
            padding: 30upx;  

            .img {  
                width: 100%;  
                height: 116upx;  
                margin-bottom: 38upx;  
            }  

            .notic-items {  
                margin-bottom: 30upx;  

                &:last-of-type {  
                    margin: 0 !important;  
                }  

                .notic-title {  
                    @include ellipsis(2);  
                    font-size: 32upx;  
                    font-family: PingFang SC;  
                    font-weight: 600;  
                    color: #333333;  
                    opacity: 1;  
                    margin-bottom: 32upx;  
                    line-height: 50upx;  

                    .hot {  
                        background: #CA1A1C;  
                        opacity: 1;  
                        border-radius: 4upx;  
                        padding: 4upx 6upx;  
                        // margin-right: 10upx;  
                        font-size: 24upx;  
                        font-family: PingFang SC;  
                        font-weight: 400;  
                        color: #FFFFFF;  
                    }  
                }  

                .img-right {  
                    width: 100%;  
                    height: 320upx;  
                    border-radius: 8upx;  
                }  

                .notic-left {  
                    margin-top: 8upx;  

                    .dis-f {  
                        font-size: 24upx;  
                        font-family: PingFang SC;  
                        font-weight: 400;  
                        color: #333333;  
                        opacity: 0.5;  
                        @include flex-start;  

                        text {  
                            margin-right: 20upx;  

                            &:nth-last-of-type(1) {  
                                margin-right: 0;  
                            }  
                        }  
                    }  
                }  

            }  

        }  

        .notic {  
            padding: 20upx 30upx;  

            .img {  
                width: 100%;  
                height: 116upx;  
                margin-bottom: 38upx;  
            }  

            .notic-item {  
                margin-bottom: 30upx;  
                @include flex-row;  

                .notic-left {  
                    .notic-title {  
                        @include ellipsis(2);  
                        font-size: 30upx;  
                        font-family: PingFang SC;  
                        font-weight: 600;  
                        color: #333333;  
                        opacity: 1;  
                        margin-bottom: 22upx;  
                        line-height: 50upx;  

                        .hot {  
                            font-size: 24upx;  
                            font-family: PingFang SC;  
                            font-weight: 400;  
                            color: #CA1A1C;  
                            opacity: 1;  
                            border: 2upx solid #CA1A1C;  
                            opacity: 1;  
                            border-radius: 8upx;  
                            padding: 0 6upx;  
                            // margin-right: 10upx;  
                        }  
                    }  

                    .dis-f {  
                        font-size: 24upx;  
                        font-family: PingFang SC;  
                        font-weight: 400;  
                        color: #333333;  
                        opacity: 0.5;  
                        @include flex-start;  

                        text {  
                            margin-right: 20upx;  
                        }  
                    }  
                }  

                .img-right {  
                    width: 218upx;  
                    min-width: 218upx;  
                    height: 154upx;  
                    border-radius: 8upx;  
                    margin-left: 42upx;  
                }  
            }  

        }  

        .specialColumn {  
            .special-title {  
                padding: 0 30upx;  
                margin-bottom: 20upx;  
            }  

            .list_item {  
                padding: 0 30upx;  
                display: flex;  
                justify-content: flex-start;  
                align-items: center;  

                .list_item_img {  
                    min-width: 520upx;  
                    width: 520upx;  
                    height: 260upx;  
                    margin-right: 20upx;  
                    overflow: hidden;  
                    border-radius: 20rpx;  

                    image {  
                        width: 100%;  
                        height: 100%;  
                        border-radius: 20rpx;  
                    }  
                }  
            }  
        }  
    }  

    .swiperMain {  
        width: 100%;  
    }  

    .swiperHead {  
        position: fixed;  
        top: 0;  
        z-index: 10;  
        width: 100%;  
        background: #FFFFFF;  
    }  

    .swiperHead scroll-view {  
        display: flex;  
        flex-direction: row;  
        flex-wrap: nowrap;  
        white-space: nowrap;  
    }  

    .swiperTab {  
        display: inline-flex;  
        flex-direction: column;  
        text-align: center;  
    }  

    .swiperCont {  
        width: 100%;  
        // padding-bottom: 20rpx;  
    }  

    /* #ifdef H5 */  
    .swiperHead {  
        position: fixed;  
        top: 44px;  
        z-index: 10;  
        width: 100%;  
        background: #FFFFFF;  
    }  

    /* #endif */  

    .swiper {  
        width: 100%;  
    }  

    .swiperItem {  
        height: 400rpx;  
        overflow: auto;  
        // padding-bottom: 40rpx;  
    }  

    .swiperItem image {  
        width: 100%;  
        height: 100%;  
        display: block;  
    }  

    .bigFontModel {  
        .notic-title {  
            font-size: 36upx !important;  
        }  
    }  
</style>

操作步骤：

对页面进行滑动，再返回顶部

预期结果：

正常

实际结果：

对页面进行滑动，再返回顶部时轮播样式错乱了