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 这样 ...
随机推荐
- 【MySQL】【3】String和Date相互转换
正文: 1,Date转String --结果:<2019-04-10> SELECT DATE_FORMAT(SYSDATE(), "%Y-%m-%d") FROM D ...
- 牛客练习赛32-D-MST+tarjin割边
链接:https://ac.nowcoder.com/acm/contest/272/D来源:牛客网 题目描述 小p和他的朋友约定好去游乐场游玩,但是他们到了游乐场后却互相找不到对方了. 游乐场可以看 ...
- CF-517C-思维/math
http://codeforces.com/contest/1072/problem/C 题目大意是给出两个数a,b ,找出若干个数p,使得 SUM{p}<=a ,找出若干个数q使得SUM{q} ...
- Leetcode 117
if(root == NULL) return; queue<TreeLinkNode *> que; que.push(root); while(!empty(que)){ int le ...
- bootstrap table导出功能无效报错Uncaught INVALID_CHARACTER_ERR: DOM Exception 5和导出中文乱码问题
由于表格数据中含有中文导致的,在网页的开发者选项中报一个 Uncaught INVALID_CHARACTER_ERR: DOM Exception 5 问题.这个问题是由于BootStrap tab ...
- JS实现下拉单的二级联动
因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...
- ubuntu14静态ip配置
0.配置ip需要掌握的一些基本指令 打开/创建文件 sudo vim ... 插入信息 i 保存并强制退出 先按Esc,再键入:wq!,回车 1.使用命令 sudo vi ...
- python3+pyshark读取wireshark数据包并追踪telnet数据流
一.程序说明 本程序有两个要点,第一个要点是读取wireshark数据包(当然也可以从网卡直接捕获改个函数就行),这个使用pyshark实现.pyshark是tshark的一个python封装,至于t ...
- JAVA工程师面试常见问题集锦
集锦一: 一.面试题基础总结 1. JVM结构原理.GC工作机制详解 答:具体参照:JVM结构.GC工作机制详解 ,说到GC,记住两点:1.GC是负责回收所有无任何引用对象的内存空间. 注意: ...
- puppeteer 爬虫 pdf 截图 自动化
puppeteer简介 puppeteer 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人.puppeteer是一个nodejs的库,支持调用Chrome的API来操纵Web,相比较Sel ...