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 这样 ...
随机推荐
- 第三周学习进度条+PSP0过程文档
第三周学习进度条 第三周 所花时间(包括上课) 14:30-15:35(65)+19:00-21:20(140)+17:52-19:00(68)+19:10-20:45(95)+21:00-22 ...
- spring boot(二)web综合开发
上篇文章介绍了Spring boot初级教程:spring boot(一):入门,方便大家快速入门.了解实践Spring boot特性:本篇文章接着上篇内容继续为大家介绍spring boot的其它特 ...
- 【其他】【服务器】【4】删除Windows系统中不想要的服务
步骤: 1,开始菜单栏查找“服务”,打开后找到想要删除的服务 2,右键单击想要删除的服务,选择“属性”-“常规”-“服务名称”,记下服务名称(AA) 3,开始菜单栏输入“cmd”打开命令行窗口,输入s ...
- MSMQ 概述
MSMQ 概述 1) MSMQ概述 MSMQ 表示微软消息队列服务.MSMQ 可以工作在在线或者离线场景,并提供异步编程功能.如果客户端离线,MSMQ将会是最合适的方法,这是因为服务端不需要等待客户端 ...
- 【LeetCode】字符串匹配
给定目标串 haystack 和模式串 needle ,返回 needle 在 haystack 中第一次出现的位置下标,若 needle 不是 haystack 的子串则返回 -1. 1. Brut ...
- git报错fatal: I don't handle protocol 'https'处理
一.背景说明 今天使用在Cygwin中git clone时报fatal: I don't handle protocol 'https',如下: 以为是Cygwin实现的git有点问题没太在意,换去 ...
- flex入门----基础知识
传统的页面布局 在flex出现之前,双列布局,三列布局,动态盒居中,绝对居中布局等常见的布局均是采用dispaly+float+定位来布局的,一般包括以下几种布局策略: normal flow(文 ...
- Google Protocol Buffers 反序列化 转
http://www.cnblogs.com/royenhome/archive/2010/10/30/1865256.html 本文作为结束篇,会稍微介绍下怎么反序列化GoogleBuffer数 ...
- ubuntu 双硬盘挂载 windows分区自动挂载
sudo fdisk -l 查看硬盘情况 1:新建一个目录,例:old 2:mount /dev/sdb1 old 3:cd old 4:ls (就可以看到新硬盘的内容了) 取消挂载:umoun ...
- 【配置】pom.xml的配置
pom.xml的配置: 地址:https://mvnrepository.com/ 示例:配置log4j 1.在搜索框中搜索log4j 2.在搜索结果页点击log4j 3.选择一个最新的版本,点击 4 ...