主页 / 网络编程 /

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

网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了小程序scroll-view组件实现滚动的示例代码，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

前言这章我们使用小程序的 实现横向滚动和竖向滚动。

GitHub

1、竖向滚动

从简单的来，竖向滚动很简单，只用记住两点即可

得设置 scroll-y 属性； ，一定要给 scroll-view 设置一个 height 高度；

<scroll-view scroll-y style="height: 200px;">
 <view class="green" style="width: 100%; height: 200px; background: green;"></view>
 <view class="red" style="width: 100%; height: 200px; background: red;"></view>
 <view class="yellow" style="width: 100%; height: 200px; background: yellow;"></view>
 <view class="blue" style="width: 100%; height: 200px; background: blue;"></view>
</scroll-view>

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

竖向滚动

2、横向滚动

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

  • 还是要设置滚动方向为 scroll-x ；
  • 然后要给 <scroll-view></scroll-view> 设置 white-space 为 nowrap 不换行；
  • 需要将容器中包裹的标签的 display 属性设置为 inline-block 。

横向滚动

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

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

横向滚动

3、其它

（1），关于官网还提供了许多其它的属性和事件方法，大家仔细去看看

部分截图来自小程序官网

如何设置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
}

参考学习

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

上一篇：js计算两个日期间的天数月的实例代码 下一篇：详解swiper在vue中的应用(以3.0为例）

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by