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;
    }
     
    这应该是最快速只管的实现功能了。
    望评论点赞
  • 相关阅读:
    全方位深度剖析--性能测试之LoardRunner 介绍
    国外性能测试博客
    由我主讲的软件测试系列视频之性能测试系列视频讲座目录出炉了
    性能测试之系统监控工具nmon
    性能测试学习内容指南
    性能测试之操作系统计数器分析方法
    JAVA正则表达式:Pattern类与Matcher类详解
    (总结)密码破解之王:Ophcrack彩虹表(Rainbow Tables)原理详解(附:120G彩虹表下载)
    border-collapse实现表格细线边框
    安卓造成内存泄露的几个原因
  • 原文地址:https://www.cnblogs.com/zhang-hong/p/14858691.html
Copyright © 2011-2022 走看看