微信小程序scroll-view实现横向滚动和上拉加载示例


Posted in Javascript onMarch 06, 2017

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。

先看最终效果。

微信小程序scroll-view实现横向滚动和上拉加载示例

横向滚动

1.设置滚动项display:inline-block;

2.设置滚动视图容器white-space: nowrap;

3.滚动项不要用float

为什么会有以上三点要求呢?

其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧。所以才发现需要定义滚动项及容器的一些属性,浮动是不能让所有的滚动项一排显示的。

上拉加载

<scroll-view scroll-y="true" bindscrolltolower="pullUpLoad" style="height: 58%;" class="content-wrap">

实现上拉加载,只需要绑定bindscrolltolower 事件处理,当滚动到底部/左边的时候,触发这个处理函数,逻辑上就是去请求下一页的数据,并且视图上显示正在加载的样式,当数据请求成功,将其拼合到之前的数据中,并隐藏正在加载的样式。

//下拉加载
pullUpLoad: function(){
  var that = this;
  console.log("====下拉====")
  if (!that.data.hidden) {
    that.data.params.pageNo += 1;
    that.setData({
      params: that.data.params,
    })
    if(that.data.params.pageNo <= that.data.totalPages){
      that.setData({
        hidden: true,
      })
      that.getShareList();
    }else{
      that.setData({
        hidden: false,
      })
    }
  }
}

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

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

Javascript 相关文章推荐
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 #Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 #Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 #Javascript
Bootstrap导航中表单简单实现代码
Mar 06 #Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 #Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 #Javascript
Bootstrap导航简单实现代码
Mar 06 #Javascript
You might like
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
什么是反射?如何实现反射?
2016/07/25 面试题
中学生班主任评语
2014/01/30 职场文书
中学家长会邀请函
2014/02/03 职场文书
大学生就业意向书范文
2014/04/01 职场文书
试用期自我评价范文
2015/03/10 职场文书
靠谱的活动总结
2019/04/16 职场文书