taro3.x: scrollX横向滚动

tsx:

<ScrollView className="album-tabs" scrollX>
                <View className="tab-item actived">
                    <Text>效果图</Text>
                </View>
                <View className="tab-item">
                    <Text>样板图</Text>
                </View>
                <View className="tab-item">
                    <Text>实景图</Text>
                </View>
                <View className="tab-item">
                    <Text>周边配套</Text>
                </View>
                <View className="tab-item">
                    <Text>交通图</Text>
                </View>
                <View className="tab-item">
                    <Text>证照</Text>
                </View>
            </ScrollView>

scss:

white-space: nowrap
.album-tabs {
    border-bottom: $border;
    white-space: nowrap;

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }

    .tab-item {
        display: inline-block;
        height: 80px;
        line-height: 80px;
        padding: 0 30px;

        &.actived {
            color: $primary-color;
        }
    }
}

隐藏滚动:

::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }
posted @ 2020-09-18 10:09  Nyan  阅读(674)  评论(0编辑  收藏  举报