1. .subOper>scroll-view{
  2.   margin-bottom: 22rpx;
  3.   width: 100%;
  4.   white-space: nowrap;
  5. }
  6.  
  7. /*  subClass 是scroll-view的子容器，有多个 */
  8. .subClass:first-child{
  9.   /* margin-right: 25rpx; */
  10.   margin-left: 25rpx;
  11. }
  12. .subClass{
  13.   margin: 0 25rpx 0 0;
  14.   display: inline-block;
  15.   height: 88rpx;
  16.   min-width: 230rpx;
  17.   border: 3rpx solid #d5d4d4;
  18.   border-radius: 5rpx;
  19. }
  1. <scroll-view scroll-x="true" >
  2.         <view class='subClass' >
  3.           <view class='classContainer' >
  4.             <view class='classLab' >
  5.               <view class='cLabDay' >
  6.                 <label>08/05</label>
  7.                 <label>周一</label>
  8.               </view>
  9.               <view class='cLabTime' >
  10.                 11:80-12:30
  11.               </view>
  12.             </view>
  13.             <text class="iconfont icon-guanbi"></text>
  14.           </view>
  15.         </view>
  16.  
  17.         <view class='subClass' >
  18.           <view class='classContainer' >
  19.             <view class='classLab' >
  20.               <view class='cLabDay' >
  21.                 <label>08/05</label>
  22.                 <label>周一</label>
  23.               </view>
  24.               <view class='cLabTime' >
  25.                 11:80-12:30
  26.               </view>
  27.             </view>
  28.             <text class="iconfont icon-guanbi"></text>
  29.           </view>
  30.         </view>
  31.  
  32.         <view class='subClass' >
  33.           <view class='classContainer' >
  34.             <view class='classLab' >
  35.               <view class='cLabDay' >
  36.                 <label>08/05</label>
  37.                 <label>周一</label>
  38.               </view>
  39.               <view class='cLabTime' >
  40.                 11:80-12:30
  41.               </view>
  42.             </view>
  43.             <text class="iconfont icon-guanbi"></text>
  44.           </view>
  45.         </view>
  46.  
  47.         <view class='subClass' >
  48.           <view class='classContainer' >
  49.             <view class='classLab' >
  50.               <view class='cLabDay' >
  51.                 <label>08/05</label>
  52.                 <label>周一</label>
  53.               </view>
  54.               <view class='cLabTime' >
  55.                 11:80-12:30
  56.               </view>
  57.             </view>
  58.             <text class="iconfont icon-guanbi"></text>
  59.           </view>
  60.         </view>
  61.  
  62.         <view class='subClass' >
  63.           <view class='classContainer' >
  64.             <view class='classLab' >
  65.               <view class='cLabDay' >
  66.                 <label>08/05</label>
  67.                 <label>周一</label>
  68.               </view>
  69.               <view class='cLabTime' >
  70.                 11:80-12:30
  71.               </view>
  72.             </view>
  73.             <text class="iconfont icon-guanbi"></text>
  74.           </view>
  75.         </view>
  76.       </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. gleez框架获得时间控件

    1,首先你要在你的页面上引用一个js <script src="<?php echo URL::base() ?>media/vendor/datepicker/Wdate ...

  2. 【LeetCode】最大子序列和

    要求时间复杂度 O(n). e.g. 给定数组 [-2,1,-3,4,-1,2,1,-5,4],其中有连续子序列 [4,-1,2,1] 和最大为 6. 我完全没有想法,看了答案. C++实现: int ...

  3. MongoDB，无模式文档型数据库简介

    MongoDB的名字源自一个形容词humongous(巨大无比的),在向上扩展和快速处理大数据量方面,它会损失一些精度,在旧金山举行的MondoDB大会上,Merriman说:“你不适宜用它来处理复杂 ...

  4. Struts 2 初步入门（三）

    接Struts 2初步入门(二) 若想用多个通配符设定访问: <struts> <package name="default" namespace="/ ...

  5. bzoj3412

    题解: 先把询问排序 然后根据单调性来做 代码: #include<bits/stdc++.h> using namespace std; ],b[],f[],ans[]; int cmp ...

  6. fedora网络设置

    一:网络设置 1.找到要设置的网卡 命令:ip addr 列出所有的网络配置,找到你需要配置的网卡 入图,我这个是ens33 2.找到配置文件 配置文件路径: /etc/sysconfig/netwo ...

  7. C++ string类insert用法总结

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  8. vue-router-9-HTML5 History 模式

    vue-router 默认 hash 模式,页面不会重新加载 用路由的 history 模式,利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const r ...

  9. 乘法“*”和点乘“.*”&除法“/”和点除“./”区别

    reference:https://blog.csdn.net/xiaotao_1/article/details/79026406 一,*和.*的联系和区别.  1,在进行数值运行和数值乘矩阵,这两 ...

  10. MyEclipse使用教程：在Web项目中使用Web片段

    MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载 本教程向用户展示了使用关联的Web项目创建Web片段项目的机制.用户还可以获得要检查的示例项目.在本教 ...