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


Posted in Javascript onSeptember 20, 2018

前言:这章我们使用小程序的 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>

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

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

竖向滚动

2、横向滚动

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

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

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

横向滚动

<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>

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

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

横向滚动

3、其它

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

小程序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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 #Javascript
Vue框架里使用Swiper的方法示例
Sep 20 #Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 #Javascript
Vue常见面试题整理【值得收藏】
Sep 20 #Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 #Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 #Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 #Javascript
You might like
PHP获取文件相对路径的方法
2015/02/26 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
python实现学生管理系统
2018/01/11 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
用Python逐行分析文件方法
2019/01/28 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python之修改图片像素值的方法
2019/07/03 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
初中学校军训方案
2014/05/09 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python