zoukankan      html  css  js  c++  java
  • 微信小程序横向滚动

    wxml 页代码:
         
    <view class="scrollBox">
          <scroll-view class="scroll" scroll-x>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>

          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          <view class="scrollItem">
            <view class="contentItem">全部</view>
            <view class="xiahuaxian"></view>
          </view>
          
          </scroll-view>
        </view>
     
    css 页代码:
    /* scrollBox  滚动 */
    .scrollBox {
      height: 90rpx;
       100%;
      background-color: #fff;
      padding-top: 5rpx;
      box-sizing: border-box;
    }
    .scroll{
      white-space: nowrap;
    }
    .scrollItem{
      display: inline-block;
       105rpx;
      height: 60rpx;
      border: 1px solid #000;
    }
    .scroll .contentItem {
      font-size: 30rpx;
      color: #313131;
       105rpx;
      height: 36rpx;
      line-height: 36rpx;
      text-align: center;

    }
    .scroll .xiahuaxian {
       35rpx;
      height: 10rpx;
      background-color: #fd390f;
      margin: 10rpx 0 0 30rpx;
    }
     
    这应该是最快速只管的实现功能了。
    望评论点赞
  • 相关阅读:
    页面抛出的"Unable to validate data"错误
    oracle的sqlnet.ora,tnsnames.ora,listener.ora三个配置文件 water
    Win7下完全卸载Oracle 11g water
    抛出多个异常 water
    【转】有关Oracle随机字符串的生成方法及具体应用 water
    【转】oracle 中随机取一条记录的两种方法 water
    【转】Oracle索引列NULL值引发执行计划该表的测试示例 water
    Oracle 取随机数 water
    dbms_output.put_line长度限制问题 water
    oracle 监听启动、停止、查看命令 water
  • 原文地址:https://www.cnblogs.com/zhang-hong/p/14858691.html
Copyright © 2011-2022 走看看