zoukankan      html  css  js  c++  java
  • 小程序 scroll-view 属性 scroll-x="true" 失效

    解决:

     scroll-view  加 white-space: nowrap;

     scroll-view 子元素加 display: inline-block;

    ⚠️:不用加 display: flex; 属性

    如下代码:

          <view class="instruments-head">
                
                <scroll-view class="instruments-scroll" scroll-x="true">
                    <view class="instruments-scroll-item" :class="item.isActive ? 'active' : ''" v-for="(item,index) in instrumentsList" :key="index" @click="handleInstruments(index,item.id)">
                        <image :src="item.img"></image>
                        <view class="head-item">{{ item.text }}</view>
                    </view>
                </scroll-view>
                
            </view>
            .instruments-head{
                background-color: #f6f6f6;
                width: 100%;
                height: 200rpx;
                border-bottom: 1px solid #e5e5e5;
                padding: 20rpx 2rpx 20rpx 20rpx;
                margin-bottom: 20rpx;
                .instruments-scroll{
                    white-space: nowrap;
                    .instruments-scroll-item{
                        display: inline-block;
                        margin-right: 20rpx;
                        width: 160rpx;
                        height: 160rpx;
                        position: relative;
                        border-radius: 15rpx;
                        background-color: #ce4131;
                        box-sizing: border-box;
                        image{
                            width: 100%;
                            height: 100%;
                            border-radius: 15rpx;
                        }
                        .head-item{
                            position: absolute;
                            top: 10rpx;
                            left: 10rpx;
                            color: #fff;
                            font-size: 22rpx;
                            font-weight: bold;
                        }
                    }
                }
            }
  • 相关阅读:
    codeforces 862B
    codeforces 863B
    codeforces 864B
    codeforces 867B
    codeforces 868B Race Against Time
    codeforces 869B The Eternal Immortality
    CodeForces
    nyoj 括号配对问题(模拟栈的过程)
    HDU
    nyoj 119 士兵杀敌(三)线段树
  • 原文地址:https://www.cnblogs.com/zhaohui-116/p/13702340.html
Copyright © 2011-2022 走看看