wx小程序横向滚动
.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>xml文件 <view> <scroll-view scroll-x class="scroll-header"> <view cl ...
- 微信小程序横向滚动
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" > ...
- 微信小程序-通知滚动小提示
代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- wx小程序获取用户位置信息
wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...
- wx小程序初体验
小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...
- 微信小程序scroll-view滚动一次多次触发的问题解决方案
最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...
- 微信小程序—picker(滚动选择器)
官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...
- wx小程序知识点(三)
三.封装小程序的数据请求 (1)在根目录创建utils目录,创建config.js.base.js (2)在config.js中创建config类,并将请求路径配置给config的属性restUrl, ...
- wx小程序知识点(二)
二.WXML和HTML的异同.WXSS和CSS的异同 (1)WXML和HTML 相同点:都是用来描述页面结构的,由标签.属性组成 不同点:标签名不一样,小程序标签名更少: 小程序多了 wx:if 这样 ...
随机推荐
- element-ui table中排序 取消表格默认排序问题
sortTable 设置为 custom 一定要设置在列上
- leetcode-algorithms-27 Remove Element
leetcode-algorithms-27 Remove Element Given an array nums and a value val, remove all instances of t ...
- SQL 经典回顾:JOIN 表连接操作不完全指南
2017-02-23 小峰 ITPUB 点击上方“蓝字”可以关注我们哦  |转载自:码农网 |原文链接:www.codeceo.com/article/sql-join-guide.html ...
- tar打包时的排除选项
1. 在命令行排除文件时,用 --exclude, 可以用多个--exclude . 可以用=号,也可以不用 如 tar -cvf ./aaa.tar ./tvc --exclude ...
- 创建型模式篇(单例模式Single Pattern)
一.单例模式(Singleton Pattern) 单例模式要求一个类只能有一个实例,并且提供了一个全局的访问点. 比如说,中国主席的职位是Singleton,法律规定主席选举,任何时间只能有一个主席 ...
- 理解javascript封装
封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出 ...
- MySql语句中Union和join的用法
Union UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT ...
- xml常用操作(js、sql、vb)
我们经常会用到xml操作,如下介绍了js.sql.vb等对xml的操作. JS创建xml对象 //创建对象 function getDataXML() { var objTds = $(&qu ...
- Java反射《四》获取方法
package com.study.reflect; import java.lang.reflect.InvocationTargetException; import java.lang.refl ...
- Git的基本使用(github)
关于Git的基本使用: 上传本地文件到github仓库中 首先要有自己的github账号,新建仓库: saiku-3.9 其次 本地安装好 git , 在本地任意目录下新建目录 saiku-3.9, ...