微信小程序 scroll-view组件实现列表页实例代码


Posted in Javascript onDecember 14, 2016

scroll-view组件介绍

scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧!

为app导入新page页面

首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置底部导航在"tabBar"的列表项("list")添加:

{
   "text": "列表",
   "pagePath": "pages/allJoke/allJoke",
   "iconPath": "images/note.png",
   "selectedIconPath": "images/noteHL.png"
  },

如果大家要了解具体配置的含义可以参考小程序配置文档这里不再赘述!

json配置页

接下来就是我们新建page的配置页了,在page目录下新建一个目录如alljoke,再在这个目录下新建一个allJoke.json,复制下面代码到这个文件里面:

{
  "navigationBarTitleText": "笑话集锦",
  "enablePullDownRefresh": true
}

因为我们待会做下拉刷新时需要用到小程序提供的onPullDownRefresh方法,所以在配置项里面必须开启enablePullDownRefresh.另外一个选项是页顶标题大家随意设置也可以不用设置!

wxml视图页

好轮到视图页了,同样的在alljoke目录下新建一个alljoke.wxml页面.wxml是小程序自创的一个视图页文档类型,其写法类似html,对于前端来说入门没有难度.需要详细了解的可以去阅读wxml文档.同样复制以下代码到alljoke.wxml里面

<view>
 <view>
  <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll"  bindscrolltolower="loadMore">
   <view class="block" wx:for="{{listLi}}" wx:for-item="item">
    <text>{{item.text}}</text>
   </view>  
  </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">⇧</view>
</view>

大家可以看到,我们的主角scroll-view也在这里隆重登场了!带过来的是一长串配置,就让我来为大家讲一下这些配置的作用吧!

配置项 作用
scroll-top 设置竖向滚动条的位置,要注意一点如果设置的值没有变化,组件不会渲染!
scroll-y 允许纵向滚动
bindscroll 滚动时触发的回调函数
bindscrolltolower 滚动到底部触发的事件

用到的选项都列出来了,还有一点需要大家特别注意的:

使用竖向滚动条时必须为组件设置一个固定高度就是上面代码style里面设置的高!切记切记!

更多资料请阅读微信小程序scroll-view组件文档

wxss样式

同样在alljoke目录下面新建allJoke.wxss文件,小程序的样式和传统css差不多大家可以根据自己喜好自行设计,这里我简单做了一下样式比较丑大家将就着用吧.(题外话:受不了的自己动手丰衣足食)

.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
}

小程序文档中关于样式的介绍

逻辑部分

来到最后也是最重要的逻辑部分了!老规矩alljoke目录下新建allJoke.js文件,先贴代码再慢慢讲解:

Page({
 data:{
  listLi:[],
  page:1,
  scrollTop:0,
  done: false,
  hidden: true
 },
 onLoad:function(options){
  this.getList(1);
 },

 onPullDownRefresh: function(){
  wx.showToast({
   title: '加载中',
   icon: 'loading'
  });
  this.getList(1,true);
 },

 getList: function(page, stopPull){
  var that = this
  wx.request({
   url: 'https://wechat.sparklog.com/jokes',
   data: {
    page: page,
    per: '20'
   },
   method: 'GET', 
   success: function(res){
    if(page===1){
     that.setData({
      page: page+1,
      listLi: res.data,
      done: false
     })
     if(stopPull){
      wx.stopPullDownRefresh()      
     }
    }else{
     if(res.data<20){
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data),
       done: true
      }) 
     }else{
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data)
      }) 
     }  
    }
   },
  })
 },

 loadMore: function(){
  var done = this.data.done;
  if(done){
   return
  }else{
   wx.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 500
   });
   var page = this.data.page;
   this.getList(page)
  }
 },

 scrll: function(e){
  var scrollTop = e.detail.scrollTop
  if(scrollTop>600){
   this.setData({
    scrollTop: 1,
    hidden: false    
   })
  }else{
   this.setData({
    scrollTop: 1,
    hidden: true  
   });
  }
 },

 goTop: function(){
  this.setData({
   scrollTop:0,
   hidden: true 
  })
 }
})

大家可以看到首先我们需要用page()函数注册页面,然后在data里面定义一些初始化数据.onLoad是这个页面的生命周期函数,页面加载时会调用到它.我们在页面加载时调用了自定义的getList函数.这个函数接收两个参数,第一个参数是要加载的页面,第二个参数是布尔值,用来判断是下拉刷新调用的这个函数,还是页面加载时调用的这个函数!接下来onPullDownRefresh是小程序提供的下拉刷新函数,里面wx.showToast显示消息提示框,用来提示用户正在加载,loadMore是滚动到底部触发的事件.函数里面会检查是否已经加载了全部列表项,如果已经加载了全部列表项会return掉,如果数据库还有列表项,上拉到底部加载下一页!scrll函数是滚动时触发的函数,可以看到这个函数会判断滚动条位置是否大于六百,如果大于六百显示点击直达底部的按钮,如果小于六百隐藏直达顶部的按钮.同时会更新滚动条位置的参数.刚刚在讲wxml时已经讲过scroll-view组件设置竖向滚动条位置scroll-top设置项时如果参数一样,页面不会重新渲染,我们就是利用了这一点,如果要到达顶部,位置必定是'0',滚动时触发scrll函数,我们把位置信息设置为'1',因为滚动函数会反复触发,所以此时页面是不会渲染的.也就是说由于位置设置参数都是设置为'1'不变,导致scroll-top设置项不会生效为goTop函数的直达顶部(把参数变为'0'提供机会).最后就是直达顶部按钮的函数了,可以看到它是把位置信息变为'0',参数变化scroll-top设置生效,页面直达顶部.最后再通过改变hidden这个参数把自己(直达顶部按钮)给隐藏掉了!

结尾

ok,通过上面的步骤我们终于实现了下拉刷新上拉加载的列表页功能了,从上面我们可以看到微信提供的接口和api还是挺全面的,要实现一个功能总体来说要比原生js实现要简单一些!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Vue动态组件实例解析
Aug 20 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 #Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 #Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 #Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 #Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 #Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 #Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 #Javascript
You might like
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
python中的lambda表达式用法详解
2016/06/22 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
聘用意向书范本
2014/04/01 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
亲情作文之母爱
2019/09/25 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题