使用小程序的scroll-view组件实现列表页

hong26 · on 13 Dec 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 
    })
  }
})

小程序列表滚动

使用小程序的scroll-view组件实现列表页

hong26 commented on 13 Dec 2016

猜你喜欢