文章目录
写在前面
- 本文写了很多官网的API的相关知识点,可略过直接到官网查看
记第一个小程序DEMO
涉及到滚动视图区域,所以我们先来看看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-background
:设置自定义下拉刷新区域背景颜色 -
refresher-triggered
:设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
(3)其它属性
(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>
原文地址:https://blog.csdn.net/weixin_41619240/article/details/117718053
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。