uniapp实现横向滚动样式条-蒲公英云

uniapp实现横向滚动样式条

简介：本文讲解，uniapp如何实现横向滚动样式条。

运行代码：

<template>
    <view class="content">
        <view class="home">
            <scroll-view scroll-x class="navscroll" > <!-- 设置滚动条方向为横向 -->
                    <view class="item" v-for="item in 10"> <!-- 通过for循环生成view -->
                        国内
                    </view>
            </scroll-view>
            <div class="content">
                <div class="row">每一行新闻</div>
            </div>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
        },
        methods: {
        }
    }
</script>
<style lang="scss" scoped>
.navscroll{
    white-space: nowrap; // 设置内容不换行
    height: 100rpx; // 设置滑动栏的高度
    background: #F7F8FA; // 设置滑动栏的颜色
    // 通过渗透来消除状态栏下方的下划线
    /deep/ ::-webkit-scrollbar {
        width: 4px !important;
        height: 1px !important;
        overflow: auto !important;
        background: transparent !important;
        -webkit-appearance: auto !important;
        display: block;
    }
    .item{
        font-size: 40rpx; // 设置字体大小
        display: inline-block; // 设置为行内块
        line-height: 100rpx; // 设置行高
        padding: 0 30rpx; // 设置外边距
        color:#333; // 设置颜色        
    }
}
</style>