脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序scroll-view实现滚动

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

 更新时间：2018年09月20日 10:05:33   作者：Ewall_  
这篇文章主要介绍了小程序scroll-view组件实现滚动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

GitHub： https://github.com/Ewall1106/miniProgramDemo

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

部分截图来自小程序官网

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

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

您可能感兴趣的文章:

相关文章

  • bootstrap table实现合并单元格效果

    bootstrap table实现合并单元格效果

    这篇文章主要为大家详细介绍了bootstrap table实现合并单元格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 你需要理解的7种常见前端攻击

    你需要理解的7种常见前端攻击

    在Web开发中前端安全至关重要,常见的前端攻击包括跨站脚本(XSS)、依赖库风险、跨站请求伪造(CSRF)、点击劫持、内容交付网络(CDN)劫持、HTTPS降级和中间人攻击等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • footer定位页面底部（代码分享）

    footer定位页面底部（代码分享）

    本文主要分享了footer定位页面底部的实例代码，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript中的子窗口与父窗口的互相调用问题

    JavaScript中的子窗口与父窗口的互相调用问题

    本文给大家介绍了JavaScript中的子窗口与父窗口的互相调用问题，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-02-02
  • uni-app实现数据下拉刷新功能实例

    uni-app实现数据下拉刷新功能实例

    很多列表页总数量很大,一次性查询加载会导致页面有很长时间的空白期,自然体验感极差,就会使用分页加载数据,这篇文章主要给大家介绍了关于uni-app实现数据下拉刷新功能实例的相关资料,需要的朋友可以参考下
    2022-08-08
  • js改变html的原有内容实现方法

    js改变html的原有内容实现方法

    下面小编就为大家带来一篇js改变html的原有内容实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Javascript 6里的4个新语法

    Javascript 6里的4个新语法

    这篇文章主要为大家详细介绍了Javascript 6里的4个新语法，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript Date对象详解及时间戳和时间的相互转换问题

    JavaScript Date对象详解及时间戳和时间的相互转换问题

    这篇文章主要介绍了JavaScript Date对象详解及时间戳和时间的相互转换问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • JavaScript实现简单的Markdown语法解析器

    JavaScript实现简单的Markdown语法解析器

    Markdown 是一种轻量级标记语言， 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。本文将利用JavaScript实现简单的Markdown语法解析器，感兴趣的可以了解一下
    2023-03-03
  • JS实现带鼠标效果的头像及文章列表代码

    JS实现带鼠标效果的头像及文章列表代码

    这篇文章主要介绍了JS实现带鼠标效果的头像及文章列表代码,涉及JavaScript响应鼠标事件动态切换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论