可滚动视图scroll-view组件

目录

官网功能描述

一、个人认为scroll-view常用的属性

1.横向滚动：scroll-x与纵向滚动：scroll-y

2.下拉刷新：refresher-enabled 

3.滚动到底部bindscrolltolower

二、scroll-view的*.wxss样式设置

总结:

---

官网功能描述

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

1. 横向滚动需打开 enable-flex 以兼容 WebView，如
2. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确

一、个人认为scroll-view常用的属性

1.横向滚动：scroll-x与纵向滚动：scroll-y

*.wxml开启使用：

2.下拉刷新：refresher-enabled 

*.wxml开始使用：

//虽然要设置refresher-enabled，如果要实现真正的刷新还需要写相应的函数
 

 *.js文件设置函数

handleRefresher() {
    // 再次发请求获取视频数据
    console.log("下拉刷新")
    this.getVideoList(this.data.navId)
  },

3.滚动到底部bindscrolltolower

*.wxml开启使用：

 handleToLower() {
    console.log('scroll-view 上拉触底');
    // 数据分页：1.后端分页  2.前端分页
    // 模拟一个数据
    let newVideoList = [];
    // 添加到视频集合中
    let videoList = this.data.videoList;
    videoList.push(...newVideoList);
    this.setData({
      videoList
    })
  },

二、scroll-view的*.wxss样式设置

1.前端*.wxml设置

2.前端*.wxss设置

.videoScroll {
  margin-top: 10rpx;
  /* calc: 可以动态计算css的宽高， 运算符左右两侧必须加空格，否则计算会失效 */
  /* 视口单位： vh vw  1vh = 1%的视口高度  1vw = 1%的视口宽度*/
  height: calc(100vh - 152rpx);
  /*height: calc(100vh - 100rpx); 用来测试页面上拉触底*/
}

总结:

• 微信小程序是组件进行拼装的项目
• scroll-view组件是视频展示和图片展示的很好容器