小程序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编程起步(第一课)
Jan 10 Javascript
Javascript Object.extend
May 18 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
js中!和!!的区别与用法
May 09 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 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
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python matplotlib拟合直线的实现
2019/11/19 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
五年级科学教学反思
2014/02/05 职场文书
水利水电专业自荐信
2014/07/08 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python