微信小程序之scroll-view

本帖主要内容

scroll-view上拉加载（分页加载/加载更多）
scroll-view滑动区域的规划（防止自定义navbar随着屏幕滑动）
scroll-view中隐藏横向滑动的滚动条

Reference material（参考材料）:
微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/index.html
Prerequisite（前提条件）：

scroll-view调用时必须初始化一个具体的height高度值
api接口请求，（wx.request or promise请求已掌握）

重头戏：

scroll-view上拉加载（分页加载）：
情景：列表获取数据，api返回的数据每一个10条，当我们想上拉加载更多时，我们可以触发scroll-view的bindscrolltolower方法进行请求数据。

界面	api数据

WXML:

    <scroll-view scroll-y="true" enable-flex="true" style="height:{{scrollHeight}}px;" enable-back-to-top="true" bindscrolltolower="getMoreTen">
        <view style="background:#f9f9f9;height:2rpx;width:100%;"></view>
        <!--wx:for循环加载 -->
        <view wx:for="{{list}}" wx:key="id">
            <view style="margin:20rpx">
            <!--自定义组件-->
                <!--<yy-course-detail list="{{item}}" bindtap="AttendClass" data-list="{{item}}" data-index="{{index}}"></yy-course-detail>-->
            </view>
        </view>
        <view wx:if="{{noMore}}" style="text-align: center;height:200rpx;padding-top: 34rpx;">无更多数据</view>
    </scroll-view>

JS:

//上拉加载,多拿10条
//noMore:无更多标志，onloadrequest:正在加载中标志  
getMoreTen: function () {
    var that = this;
    requestData.page_num = this.data.pageNum + 1;
    //设置发送请求的data中的页数+1
    if (that.data.noMore || that.data.onloadrequest) {
      //如果正在请求或者无更多数据的时候，就不加载
      return ;
    } else {
      this.setData({
        onloadrequest: true
        //设置为正在加载，防止用户网络信号不好，反复上拉加载时的情况。
      })
      //wx.showLoading({
       //  title: '正在加载',
      //})
      //也可设置为wx.ShowLoading(),提示用户正在加载
    }
    //api接口请求，发送一个request请求，这里省略
    //接口请求后的操作：
    //if : 有数据：将数据渲染到界面（this.setData({})）、将标志onloadrequest设置为false
    //无数据：设置noMore标志，提示用户无数据，将onload设置为false
    //wx.hideLoading()
}

其他上拉加载的方法：

微信小程序官方提供了两种方法："onPullDownRefresh" and "onReachBottom"方法实现小程序的下拉刷新和上拉加载。

scroll-view滑动区域的规划

区域规划.png

    wx.getSystemInfo({
      complete: (res) => {
        that.setData({
          //windowHeight:可使用的窗口高度
          //statusBarHeight:状态栏的高度
          //screenHeight:屏幕高度
          //scrollHeight：可滑动的区域
          scrollHeight:res.windowHeight-res.statusBarHeight-60-20-44
        })
      },
    })

这样做的好处：当navbar是一个自定义的组件的时候，且navbar的position不为fixed，这个时候如果scroll-view的高度太长，会造成下划时，navbar会被往上挤，这个时候合理的规划屏幕滑动区域，可以有效的防止这个问题。

scroll-view中隐藏横向滑动的滚动条

scroll-view设置注意事项：
HTML:
scroll-x=''true''
CSS:
scroll-view{
width:100%;
white-space:nowrap;//不让它换行
}

隐藏横向滚动条：
1、伪类选择器
::-webkit-scrollbar{
width:0;
height:0;
color:transparent;
}

参数

2、取巧：

通过view的overflow：hidden，将超出的滚动条隐藏掉。