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 这样 ...
随机推荐
- spring boot 2.0(二)动态banner的支持
Spring Boot 2.0 提供了很多新特性,其中就有一个小彩蛋:动态 Banner,今天我们就先拿这个来尝尝鲜. 配置依赖 使用 Spring Boot 2.0 首先需要将项目依赖包替换为刚刚发 ...
- 3月26 document的练习
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
- 移除input框type="number"在部分浏览器的默认上下按钮
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !impor ...
- upsource初探
在JetBrains 的官网上,看到codereview的工具 upsource ,https://www.jetbrains.com/upsource/ 官方的英文文档 来看下博客园上有博主简单的 ...
- 【转】Vue中mintui的field实现blur和focus事件
首先上代码说总结: <mt-field label="卡号" v-model="card.cardNo" @blur.native.capture=&qu ...
- python3+paramiko实现ssh客户端
一.程序说明 ssh客户端实现主要有以下四个问题: 第一个问题是在python中ssh客户端使用哪个包实现----我们这里使用的是paramiko 第二个问题是怎么连接服务器----连接服务器直接使用 ...
- reload() 函数
reload() 函数 当一个模块被导入到一个脚本,模块顶层部分的代码只会被执行一次. 因此,如果你想重新执行模块里顶层部分的代码,可以用 reload() 函数.该函数会重新导入之前导入过的模块.语 ...
- mac 安装Seaslog扩展及SeasLogger应用
首先下载 http://pecl.php.net/package/SeasLog 下载最新解压 cd /SeasLog-2.0.2/SeasLog-2.0.2/ phpize ./configure ...
- ueeditor 百度编译器使用onchange效果
<script id="editor" type="text/plain" style="width:100%;height:200px;&qu ...
- Boost中的网络库ASIO,nginx
boost C++ 本身就是跨平台的,在Linux.Unix.Windos上都可以使用. Boost.Asio 针对网络编程,很多服务端C++开发使用此库. 这个库在以下的平台和编译器上测试通过: ...