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


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 原型模式实现OOP的再研究
Apr 09 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
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
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Python正则捕获操作示例
2017/08/19 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
高中军训广播稿
2014/01/14 职场文书
秋季运动会活动方案
2014/02/05 职场文书
岗位职责风险点
2014/03/12 职场文书
岗位安全生产责任书
2014/07/28 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
应届毕业生的自我评价
2019/06/21 职场文书