微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码


Posted in Javascript onJanuary 13, 2017

 微信小程序 滑动方式

竖向滑动:

<scroll-view scroll-y="true" style="height: 200rpx;">
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

横向滑动:

<!-- white-space-->
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
inherit: 继承

水平滚动

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
原生js编写2048小游戏
Mar 17 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
bootstrap警告框使用方法解析
Jan 13 #Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 #Javascript
js实现文字向上轮播功能
Jan 13 #Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 #Javascript
js实现交通灯效果
Jan 13 #Javascript
微信小程序 简单教程实例详解
Jan 13 #Javascript
javascript构造函数以及原型对象的理解
Jan 13 #Javascript
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python使用matplotlib绘制热图
2018/11/07 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
django 微信网页授权登陆的实现
2019/07/30 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
负责培养人意见
2015/06/05 职场文书
交流会主持词
2015/07/02 职场文书
护士岗位竞聘书
2015/09/15 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电