小程序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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
详解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
如何删除多级目录
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP如何编写易读的代码
2007/07/10 PHP
php二维数组转成字符串示例
2014/02/17 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
繁简字转换功能
2006/07/19 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
js计算精度问题小结
2013/04/22 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
python算法学习之计数排序实例
2013/12/18 Python
python实现多线程抓取知乎用户
2016/12/12 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python3排序的实例方法
2020/10/20 Python
网上蛋糕店创业计划书
2014/01/24 职场文书
2015年植树节活动总结
2015/02/06 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
js前端图片加载异常兜底方案
2022/06/21 Javascript