newPage
newPage
  • 发布:2024-05-23 21:26
  • 更新:2024-05-23 23:19
  • 阅读:144

为什么我的scroll-view自动添加了display:flex属性

分类:uni-app

为什么我的scroll-view自动添加了display:flex属性
导致无法进行滚动

2024-05-23 21:26 负责人:无 分享
已邀请:
newPage

newPage (作者)

微信小程序自动生成了一个wxss文件,里面

scroll-view {
display:flex;
flex-direction:column;
。。。
}

微信开发工具中,元素查看发现,scroll-view display:flex;

element.style {
}
.scrollView.data-v-4d24bbf8 {
position: relative;
width: 100%;
height: 100%;
}
view.data-v-4d24bbf8, scroll-view.data-v-4d24bbf8, swiper.data-v-4d24bbf8, swiper-item.data-v-4d24bbf8, cover-view.data-v-4d24bbf8, cover-image.data-v-4d24bbf8, icon.data-v-4d24bbf8, text.data-v-4d24bbf8, rich-text.data-v-4d24bbf8, progress.data-v-4d24bbf8, button.data-v-4d24bbf8, checkbox.data-v-4d24bbf8, form.data-v-4d24bbf8, input.data-v-4d24bbf8, label.data-v-4d24bbf8, radio.data-v-4d24bbf8, slider.data-v-4d24bbf8, switch.data-v-4d24bbf8, textarea.data-v-4d24bbf8, navigator.data-v-4d24bbf8, audio.data-v-4d24bbf8, camera.data-v-4d24bbf8, image.data-v-4d24bbf8, video.data-v-4d24bbf8, picker-view.data-v-4d24bbf8, picker-view-column.data-v-4d24bbf8 {
box-sizing: border-box;
}
view, image, input, scroll-view, swiper, swiper-item, text, textarea, video {
position: relative;
border: 0px solid #000000;
box-sizing: border-box;
}
view, label, swiper-item, scroll-view {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}

newPage

newPage (作者)

使用 display: block !important;,依然无法滑动

newPage

newPage (作者)

经过测试发现是swip-item出现上面的问题导致的,而不是scroll-view

喜欢技术的前端

喜欢技术的前端 - QQ---445849201

检查是不是全局样式影响了,swiper-item 应该是swiper 组件

swipe  
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->  
<template>  
    <view>  
        <view class="uni-margin-wrap">  
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"  
                :duration="duration">  
                <swiper-item>  
                    <view class="swiper-item uni-bg-red">A</view>  
                </swiper-item>  
                <swiper-item>  
                    <view class="swiper-item uni-bg-green">B</view>  
                </swiper-item>  
                <swiper-item>  
                    <view class="swiper-item uni-bg-blue">C</view>  
                </swiper-item>  
            </swiper>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            background: ['color1', 'color2', 'color3'],  
            indicatorDots: true,  
            autoplay: true,  
            interval: 2000,  
            duration: 500  
        }  
    },  
    methods: {  
        changeIndicatorDots(e) {  
            this.indicatorDots = !this.indicatorDots  
        },  
        changeAutoplay(e) {  
            this.autoplay = !this.autoplay  
        },  
        intervalChange(e) {  
            this.interval = e.target.value  
        },  
        durationChange(e) {  
            this.duration = e.target.value  
        }  
    }  
}  
</script>  
<style>  
    .uni-margin-wrap {  
        width: 690rpx;  
        width: 100%;  
    }  
    .swiper {  
        height: 300rpx;  
    }  
    .swiper-item {  
        display: block;  
        height: 300rpx;  
        line-height: 300rpx;  
        text-align: center;  
    }  
    .uni-bg-red{  
        background-color: red;  
    }  
    .uni-bg-green{  
        background-color: green;  
    }  
    .uni-bg-blue{  
        background-color: blue;  
    }  
</style>  

scroll 组件

<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->  
<template>  
    <view>  
        <view class="uni-padding-wrap uni-common-mt">  
            <view class="uni-title uni-common-mt">  
                Vertical Scroll  
                <text>\n纵向滚动</text>  
            </view>  
            <view>  
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"  
                    @scrolltolower="lower" @scroll="scroll">  
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>  
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>  
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>  
                </scroll-view>  
            </view>  
            <view @tap="goTop" class="uni-link uni-center uni-common-mt">  
                点击这里返回顶部  
            </view>  

            <view class="uni-title uni-common-mt">  
                Horizontal Scroll  
                <text>\n横向滚动</text>  
            </view>  
            <view>  
                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">  
                    <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>  
                    <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>  
                    <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>  
                </scroll-view>  
            </view>  
            <view class="uni-common-pb"></view>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                scrollTop: 0,  
                old: {  
                    scrollTop: 0  
                }  
            }  
        },  
        methods: {  
            upper: function(e) {  
                console.log(e)  
            },  
            lower: function(e) {  
                console.log(e)  
            },  
            scroll: function(e) {  
                console.log(e)  
                this.old.scrollTop = e.detail.scrollTop  
            },  
            goTop: function(e) {  
                // 解决view层不同步的问题  
                this.scrollTop = this.old.scrollTop  
                this.$nextTick(function() {  
                    this.scrollTop = 0  
                });  
                uni.showToast({  
                    icon: "none",  
                    title: "纵向滚动 scrollTop 值已被修改为 0"  
                })  
            }  
        }  
    }  
</script>  
<style>  
    .scroll-Y {  
        height: 300rpx;  
    }  
    .scroll-view_H {  
        white-space: nowrap;  
        width: 100%;  
    }  
    .scroll-view-item {  
        height: 300rpx;  
        line-height: 300rpx;  
        text-align: center;  
        font-size: 36rpx;  
    }  
    .scroll-view-item_H {  
        display: inline-block;  
        width: 100%;  
        height: 300rpx;  
        line-height: 300rpx;  
        text-align: center;  
        font-size: 36rpx;  
    }  
    .uni-bg-red{  
        background-color: red;  
    }  
    .uni-bg-green{  
        background-color: green;  
    }  
    .uni-bg-blue{  
        background-color: blue;  
    }  
</style>  

要回复问题请先登录注册