zoukankan      html  css  js  c++  java
  • uniapp css实现双排菜单向左滑动

    <scroll-view class="typelist" scroll-x>
    <view class="nav-bar-wrap">
    <block v-for="(item,index) in goodstypelist">
    <view class="nav-bar-item">
    <navigator class="singlelist" :url="'/pages/categorylist/categorylist?&type=10&name='+item.name+'&category_id='+item.id"
    hover-class="none">
    <image :src="item.image" mode="widthFix"></image>
    <view class="f24 center">{{item.name}}</view>
    </navigator>
    </view>
    </block>
    </view>
    </scroll-view>

    .typelist{
    100%;
    overflow-x: scroll;
    overflow-y:hidden;
    white-space: nowrap;
    flex-wrap: wrap;
    padding: 40upx 0upx;
    padding-bottom: 0upx;
    }
    .typelist .singlelist{
    100%;
    display: inline-block;
    font-size: 24upx!important;
    height: 160upx;
    text-align: center;
    margin-bottom: 0rpx;
    }
    .typelist .singlelist image{
    96upx;
    margin: 0upx auto;
    }
    /* 去除滚动条 */
    ::-webkit-scrollbar {
    display:none;
    0;
    height:0;
    color:transparent;
    }
    .nav-bar-wrap { // 关键的样式
    display: flex;
    flex-flow: column wrap;
    height: 320rpx;
    }
    .nav-bar-item{
    20%;
    display: flex;
    position: relative;
    }

    ..
  • 相关阅读:
    10046 event 知多少
    10046 event 知多少
    awr相关指标解析
    父子关系展示
    secureCRT启动xmanager图形化工具
    linux单用户模式
    Tor
    windows下的unix工具集:UnxUtils
    OPENLDAP
    Windows命令行重命名文件
  • 原文地址:https://www.cnblogs.com/shoolnight/p/14844592.html
Copyright © 2011-2022 走看看