微信小程序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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
jquery offset函数应用实例
Nov 14 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
原生js编写焦点图效果
Dec 08 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 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
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
tagName的使用,留一笔
2006/06/26 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
浅析Python多线程下的变量问题
2015/04/28 Python
python使用thrift教程的方法示例
2019/03/21 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
运动会广播稿60字
2014/01/15 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年工程师工作总结
2015/04/30 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python