栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

小程序 — scroll-view组件实现滚动

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

小程序 — scroll-view组件实现滚动

前言:这章我们使用小程序的scroll-view组件实现横向滚动和竖向滚动。
GitHub:https://github.com/Ewall1106/miniProgramDemo

1、竖向滚动

首先从简单的来,竖向滚动很简单,只用记住两点即可:

  • 首先得设置scroll-y属性;

  • 其次,一定要给scroll-view设置一个height高度;


  
  
  
  

就这样我们就实现了竖向滚动:

竖向滚动

2、横向滚动

横向滚动就有点坑了...

  • 首先还是要设置滚动方向为scroll-x;

  • 然后要给设置white-space为nowrap不换行;

  • 最后需要将容器中包裹的标签的display属性设置为inline-block。

横向滚动


  
  
  
  

就这样我们就实现了横向滚动的一个基本效果:

横向滚动

3、其它

(1)当然,关于scroll-view组件官网还提供了许多其它的属性和事件方法,大家仔细去看看:

部分截图来自小程序官网



作者:Ewall_
链接:https://www.jianshu.com/p/0599cf0c44ce


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/245338.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号