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;
    }
     
    这应该是最快速只管的实现功能了。
    望评论点赞
  • 相关阅读:
    第二季-专题11-世界一下变大了-MMU
    第二季-专题10-C语言环境初始化
    第二季-专题9--代码搬移不可少
    第二季-专题8-不用内存怎么行
    第二季-专题6-点亮指路灯
    第二季-专题7-ARM跑快了---时钟初始化
    第二季-专题5-核心初始化
    第二季-专题4-我是bootloader设计师
    消除苹果系统对边框的优化
    css3
  • 原文地址:https://www.cnblogs.com/zhang-hong/p/14858691.html
Copyright © 2011-2022 走看看