.subOper>scroll-view{

  margin-bottom: 22rpx;

  width: 100%;

  white-space: nowrap;

}

/*  subClass 是scroll-view的子容器，有多个 */

.subClass:first-child{

  /* margin-right: 25rpx; */

  margin-left: 25rpx;

}

.subClass{

  margin: 0 25rpx 0 0;

  display: inline-block;

  height: 88rpx;

  min-width: 230rpx;

  border: 3rpx solid #d5d4d4;

  border-radius: 5rpx;

}
<scroll-view scroll-x="true" >

        <view class='subClass' >

          <view class='classContainer' >

            <view class='classLab' >

              <view class='cLabDay' >

                <label>08/05</label>

                <label>周一</label>

              </view>

              <view class='cLabTime' >

                11:80-12:30

              </view>

            </view>

            <text class="iconfont icon-guanbi"></text>

          </view>

        </view>

        <view class='subClass' >

          <view class='classContainer' >

            <view class='classLab' >

              <view class='cLabDay' >

                <label>08/05</label>

                <label>周一</label>

              </view>

              <view class='cLabTime' >

                11:80-12:30

              </view>

            </view>

            <text class="iconfont icon-guanbi"></text>

          </view>

        </view>

        <view class='subClass' >

          <view class='classContainer' >

            <view class='classLab' >

              <view class='cLabDay' >

                <label>08/05</label>

                <label>周一</label>

              </view>

              <view class='cLabTime' >

                11:80-12:30

              </view>

            </view>

            <text class="iconfont icon-guanbi"></text>

          </view>

        </view>

        <view class='subClass' >

          <view class='classContainer' >

            <view class='classLab' >

              <view class='cLabDay' >

                <label>08/05</label>

                <label>周一</label>

              </view>

              <view class='cLabTime' >

                11:80-12:30

              </view>

            </view>

            <text class="iconfont icon-guanbi"></text>

          </view>

        </view>

        <view class='subClass' >

          <view class='classContainer' >

            <view class='classLab' >

              <view class='cLabDay' >

                <label>08/05</label>

                <label>周一</label>

              </view>

              <view class='cLabTime' >

                11:80-12:30

              </view>

            </view>

            <text class="iconfont icon-guanbi"></text>

          </view>

        </view>

      </scroll-view>

wx小程序横向滚动的更多相关文章

  1. 微信小程序横向滚动正确姿势

    <1>xml文件 <view> <scroll-view scroll-x class="scroll-header"> <view cl ...

  2. 微信小程序横向滚动

    <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" > ...

  3. 微信小程序-通知滚动小提示

    代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. wx小程序获取用户位置信息

    wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...

  5. wx小程序初体验

    小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...

  6. 微信小程序scroll-view滚动一次多次触发的问题解决方案

    最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...

  7. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  8. wx小程序知识点（三）

    三.封装小程序的数据请求 (1)在根目录创建utils目录,创建config.js.base.js (2)在config.js中创建config类,并将请求路径配置给config的属性restUrl, ...

  9. wx小程序知识点（二）

    二.WXML和HTML的异同.WXSS和CSS的异同 (1)WXML和HTML 相同点:都是用来描述页面结构的,由标签.属性组成 不同点:标签名不一样,小程序标签名更少: 小程序多了 wx:if 这样 ...

随机推荐

  1. subline 自己使用的插件

    http://blog.csdn.net/jianhua0902/article/details/43761899 https://www.cnblogs.com/qingkong/p/5039527 ...

  2. js javascript 容错处理代码屏蔽js错误

    加入到head <SCRIPT language=javascript> window.onerror=function(){return true;} </SCRIPT> o ...

  3. 关于 EF 对象的创建问题

    在开发过程中,项目往往被划分为多层,而一个请求过来往往是从表示层开始一层一层向下调用,那么如果我们在不同的层中都使用到了 EF 上下文对象,而 有好几层都这么创建一个 EF 对象然后对其进行操作,那么 ...

  4. docker 系列之 docker安装

    Docker支持以下的CentOS版本 CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发行版本中的内核支持 Docker. ...

  5. vscode代码保存时自动格式化成ESLint风格（支持VUE）

    一.问题 vscode的默认的代码格式化ctrl+shift+f 无法通过eslint的代码风格检查是一个非常蛋疼的问题 同样在进行vue项目开发的时候,使用eslint代码风格检查是没啥问题的,但是 ...

  6. Oracle的创建表和创建约束的Sql语句

    Oracle的创建表和创建约束的Sql语法 1.创建表的语句 ---1.创建模拟的数据表 --- --1.1.创建学生表Student create table Student( StuId NUMB ...

  7. Google Protocol Buffers 反序列化 转

    http://www.cnblogs.com/royenhome/archive/2010/10/30/1865256.html   本文作为结束篇,会稍微介绍下怎么反序列化GoogleBuffer数 ...

  8. 如何搭一个vue项目

    1.yarn global add @vue/cli (vue/cli是webpack的二次开发)   2.vue create 自定义项目名称   3.选择Manually select featu ...

  9. Win10系列：JavaScript动画3

    "交叉进出"动画也是Windows动画库中的动画效果."交叉进出"动画的动画效果是在应用程序界面上隐藏一个元素并同时在相同位置显示另一个元素的时候,被隐藏的元素 ...

  10. ASP.Net MVC(3) 之Razor视图引擎的基础语法

    Razor视图引擎的基础语法: 1.“_”开头的cshtml文档将不能在服务器上访问,和asp.net中的config文档差不多. 2.Razor语法以@开头,以@{}进行包裹. 3.语法使用: 注释 ...