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


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 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 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
php array的学习笔记
2012/05/16 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
微信小程序实现图片放大预览功能
2020/10/22 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python线程里哪种模块比较适合
2020/08/02 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
搞笑创意广告语
2014/03/17 职场文书
工程承诺书怎么写
2014/05/24 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
开展警示教育活动总结
2015/05/09 职场文书
如何理解及使用Python闭包
2021/06/01 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python