.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. WDA基础二:界面,元素介绍

    1.ELEMENTS: BUTTON  按钮 CAPTION  标题 DROPDOWN_BY_IDX   带序号的下拉 DROPDOWN_BY_KEY   带键值的下拉 FILE_UPLOAD    ...

  2. CompareTo 基于的排序算法

    CompareTo 基于的排序算法(高级排序) 这个是今天学习MapReduce时发现的,自定义类后实现了WritableComparable<>接口后实现了接口中的compareTo方法 ...

  3. MySQL数据库安装与配置鸡汤

    目录 一.概述 二.MySQL安装 三.安装成功验证 四.NavicatforMySQL下载及使用 一.概述 MySQL版本:5.7.17 下载地址:http://rj.baidu.com/soft/ ...

  4. Oracle 如何循环查询结果集,进行新增或修改

    Oracle的PL/SQL中怎样循环查询的结果集,然后根据查询结果进行判断,是新增或修改操作 loop循环例子 for item in (select a,b,c from table_a where ...

  5. vs2015如何使用附加进程调试发布在IIS上项目

    1.如何使用附加进程调试IIS上的网站项目 1)在IIS部署一个网站项目 2)保证浏览器可访问(比如访问登陆页面) 3)在项目中LoginController断点,并在工具栏的调试找到附加到进程 4) ...

  6. 原 spring-boot工程中,jpa下hibernate的ddl-auto的各种属性

    jpa:  hibernate:    ddl-auto: create ddl-auto:create----每次运行该程序,没有表格会新建表格,表内有数据会清空 ddl-auto:create-d ...

  7. Jenkins结合testng注意事项

    1.在生成测试报告时,因为Jenkins自带的只有Junit的测试报告,不会显示testng的. 2.要想显示Publish TestNG Results这一项,首先需要在jenkins的首页-系统管 ...

  8. Win10系列:VC++绘制文本

    20.7.2小节介绍了如何使用Direct2D在应用窗口中绘制图片,本小节将基于20.7.2小节的项目进一步介绍如何实现文本的绘制.打开D2DBasicAnimation.h头文件,并在D2DBasi ...

  9. asp.net 发送电子邮件本地测试正常,但服务器上异常的解决办法

    如题,这个问题曾经非常苦恼,代码肯定是没有问题的.在网上也查找了不少资料,按照他们的步骤做了,还是无效. 最后问题解决了,原来:我租用腾讯云服务器,腾讯为了防止垃圾邮件,禁止了邮件发送的25号端口,原 ...

  10. (Java学习笔记) Java Networking (Java 网络)

    Java Networking (Java 网络) 1. 网络通信协议 Network Communication Protocols Network Protocol is a set of rul ...