小程序scroll-view组件实现滚动的示例代码

前言：这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、网站建设、朔州网络推广、微信平台小程序开发、朔州网络营销、朔州企业策划、朔州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供朔州建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

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组件 官网还提供了许多其它的属性和事件方法，大家仔细去看看：

部分截图来自小程序官网

如何设置scroll-view满屏滚动

文档中说到：使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

那么我们想让小程序满屏滚动该如何设置高度呢，直接设置height:100%?好像不是很好用，原因是因为这个高度没有参照物，以前我们是设置body的高度，类似，我们这里发现小程序页面渲染出来的容器是Page，那我们就先设置Page的高度100%，再设置scroll-view高度100%，问题得到解决。

官方推荐的loading效果

onLoad:function(options){
 wx.showToast({
  title: '加载中',
  icon: 'loading',
  duration: 10000//loading时间
 });
 //wx.hideToast();隐藏loading
}

参考学习 ：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。