uni-app scroll-view滚动注意

作者: hao_developer | 来源:发表于2021-04-02 14:55 被阅读0次

效果：

image.png

<scroll-view class="icon-area" scroll-x="true">
    <view v-for="(item, index) in navigationList" class="icon-item" :style="{'width': iconWidth + 'px'}" :id="index">
       <image :src="item.img"></image>
       <text>{{item.title}}</text>
    </view>
</scroll-view>

    .icon-area{
        margin-top: 80px;
        font-size: 13px;
        color: #666666;
        white-space: nowrap;
    }
    
    .icon-item{
        text-align: center;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
    }
    
    .icon-item image{
        width: 58px;
        height: 58px;
        display: block;
        margin: 0 auto;
        margin-bottom: 3px;
    }

scroll-view 滚动最好设置一下：
1： $\color{red}{id}$
2： $\color{red}{white-space: nowrap;}$ 不换行
image最好设置一下宽高