03. scroll-view

文章目录

• • 记第一个小程序DEMO
  • • 01. scroll-view滚动视图区域
    • （1）关于滚动
    • （2）关于下拉刷新
    • （3）其它属性
    • （4）关于事件
    • 02. 滚动区域布局
    • 03. 请求数据并渲染

---

写在前面

• 本文写了很多官网的API的相关知识点，可略过直接到官网查看

---

记第一个小程序DEMO

• 名称：仿网易云音乐小程序
• 接口：网易云音乐NodeJS版 API
• 内容：主要实现轮播图、歌单推荐、排行榜、歌单显示、歌曲播放、歌词显示这几部分功能，其它暂未作考虑

---

• 本文主要内容：实现首页推荐区域

---

涉及到滚动视图区域，所以我们先来看看scroll-view标签

---

01. scroll-view滚动视图区域

注，这里只作一些简单介绍

详见官网scroll-view

（1）关于滚动

• scroll-x：允许横向滚动

• scroll-y：允许纵向滚动

• scroll-top：设置竖向滚动条位置

• scroll-left：设置横向滚动条位置

• scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

• scroll-with-animation：在设置滚动条位置时使用动画过渡

（2）关于下拉刷新

• refresher-enabled：开启自定义下拉刷新

• refresher-threshold：设置自定义下拉刷新阈值

• refresher-default-style：设置自定义下拉刷新默认样式

  • 支持设置 black | white | none， none 表示不使用默认样式

• refresher-background：设置自定义下拉刷新区域背景颜色

• refresher-triggered：设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

（3）其它属性

• enable-back-to-top：iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向

• enable-flex：启用 flexBox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点

  注意版本！！！

  版本过低，是无法显示效果的

（4）关于事件

• upper-threshold：距顶部/左边多远时，触发 scrolltoupper 事件
• lower-threshold：距底部/右边多远时，触发 scrolltolower 事件
• bindscrolltoupper：滚动到顶部/左边时触发
• bindscrolltolower：滚动到底部/右边时触发
• bindscroll：滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
• bindrefresherpulling：自定义下拉刷新控件被下拉
• bindrefresherrefresh：自定义下拉刷新被触发
• bindrefresherrestore：自定义下拉刷新被复位
• bindrefresherabo：自定义下拉刷新被中止

---

然后剩下的就是布局了

---

02. 滚动区域布局

<!-- 推荐歌曲区域 -->
<view class="recommendContainer">
    <scroll-view class="recommendScroll" enable-flex="{{ true }}" scroll-x="{{ true }}">
        <view class="scrollItem">
            <image src="/static/images/001.jpg"></image>
            <text>这是一段描述歌单的文字</text>
        </view>
        <view class="scrollItem">
            <image src="/static/images/002.jpg"></image>
            <text>这是一段描述歌单的文字</text>
        </view>
        <view class="scrollItem">
            <image src="/static/images/003.jpg"></image>
            <text>这是一段描述歌单的文字</text>
        </view>
    </scroll-view>
</view>

/* 推荐歌曲样式 */
.recommendContainer {
    margin-bottom: 30rpx;
    .recommendScroll {
        /* 注意，需要开启 enable-flex */
        display: flex;
        flex-direction: row;
        height: 300rpx;
        .scrollItem {
            width: 200rpx;
            margin-right: 20rpx;
            image {
                width: 200rpx;
                height: 200rpx;
                border-radius: 10rpx;
            }
            text {
                /* 文本溢出处理 */
                display: -webkit-Box;
                -webkit-Box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 24rpx;
            }
        }
    }
}

• 实现效果如下

  

---

然后我们需要从服务器请求数据，并渲染到页面

---

03. 请求数据并渲染

• 这次使用async/await

// 获取推荐
async getRecommend() {
    // limit： 表示请求数据大小
    let res = await request('/personalized', { limit: 6 })
    if (res.code === 200) {
        this.setData({
            recommendData: res.result,
        })
    }
},

<!-- 推荐歌曲区域 -->
<view class="recommendContainer">
    <!-- 注意开启 flex布局enable-flex 和 横向滚动scroll-x-->
    <scroll-view class="recommendScroll" enable-flex="{{ true }}" scroll-x="{{ true }}">
        <view class="scrollItem" wx:for="{{ recommendData }}" wx:key="id">
            <image src="{{ item.picUrl }}"></image>
            <text>{{ item.name }}</text>
        </view>
    </scroll-view>
</view>