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;
    }
     
    这应该是最快速只管的实现功能了。
    望评论点赞
  • 相关阅读:
    有效获取状态栏(StatusBar)高度
    各种数据库连接
    Spring AOP 原理
    Spring ioc 原理
    转载的别人的ajax跨域解决方法
    如何监听input的脚本赋值
    JAVA之Socket编程
    JAVA中的多线程
    JAVA文件操作
    实验三 kali下metasploit的漏洞攻击实践
  • 原文地址:https://www.cnblogs.com/zhang-hong/p/14858691.html
Copyright © 2011-2022 走看看