uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 问题复现

1.1 template

<!-- 证件照片 -->
<view class="content-item">
    <u-scroll-list>
            <view v-for="(item, index) in certPicList" :key="item" class="pic-item">
                <view class="remove" @click="handleRemoveCertPic(index)">
                    <u-icon name="trash-fill" color="#fff" size="20"></u-icon>
                </view>
                <u--image :showLoading="false" radius="10rpx" :src="item" width="150rpx" height="150rpx">
                </u--image>
            </view>
    </u-scroll-list>
</view>

1.2 style(scss)

.content-item {
    margin-bottom: 30rpx;

    .pic-item {
        box-sizing: border-box;
        width: 150rpx;
        height: 150rpx;
        margin: 20rpx 20rpx;
        position: relative;
        border-radius: 10rpx;
        overflow: hidden;

        .remove {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 60;
            background-color: $dating-theme-color;
            color: #fff;
            padding: 5rpx;
            border-radius: 0 0 0 10rpx;
        }
    }
}

1.3 问题截图

uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题

2. 问题解决

2.1 解决办法

在<u-scroll-list>内部只放一个盒子,盒子内部包裹横向滚动列表项，并且盒子设置display:flex;

2.2 template

<!-- 证件照片 -->
<view class="content-item">
    <u-scroll-list>
    	<!-- 内部存放根容器 -->
        <view class="pic-wrap">
            <view v-for="(item, index) in certPicList" :key="item" class="pic-item">
                <view class="remove" @click="handleRemoveCertPic(index)">
                    <u-icon name="trash-fill" color="#fff" size="20"></u-icon>
                </view>
                <u--image :showLoading="false" radius="10rpx" :src="item" width="150rpx" height="150rpx">
                </u--image>
            </view>
        </view>

    </u-scroll-list>
</view>

2.3 style(scss)

.content-item {
    margin-bottom: 30rpx;

    .pic-wrap {
        display: flex;

        .pic-item {
            box-sizing: border-box;
            width: 150rpx;
            height: 150rpx;
            margin: 20rpx 20rpx;
            position: relative;
            border-radius: 10rpx;
            overflow: hidden;

            .remove {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 60;
                background-color: $dating-theme-color;
                color: #fff;
                padding: 5rpx;
                border-radius: 0 0 0 10rpx;
            }
        }

    }
}