1. 纵向滚动 scroll-y
- 当
设置为scroll-y 时, 需要将其高度设为固定值 - 如果整个页面，即最外层标签为scroll-view，需要并将其高度设为100%，也需要将page设为100%（可在app.wxss中设置）。
示例：
html 文件：
<!--pages/index/index.wxml-->
<scroll-view scroll-y="true" lower-threshold="50" bindscrolltolower="lower">
<view>content</view>
<view>content</view>
<view>content</view>
<view>content</view>
<view>content</view>
<view>content</view>
</scroll-view>css 文件：
/* pages/index/index.wxss */
scroll-view {
height: 100%;
}bindscrolltolower 绑定tap事件： 滚动到底部，会触发。
全局 css 文件：
/**app.wxss**/
page {
height: 100%;
}
2. 横向滚动 scroll-x
- 当
设置为scroll-x 时, 需要将其宽度设为固定值 - 规定内部的文本不要换行：white-space:nowrap;
- 设置其内部文本 为 行内块元素
- 如果整个页面，即最外层标签为scroll-view，需要并将其高度设为100%，也需要将page设为100%（可在app.wxss中设置）。
示例
html 文件：
<!--pages/index/index.wxml-->
<scroll-view class="scroll-view" scroll-x >
<view wx:for='{{scroll}}' wx:key='{{index}}'>
<image src='{{item.img}}'></image>
<text>{{item.title}}</text>
</view>
</scroll-view>css 文件：
/* pages/index/index.wxss */
.scroll-view {
width: 100%;
height: 240rpx;
white-space:nowrap; /* 规定段落中的文本不进行换行 */
}
.scroll-view view {
width:200rpx;
height:200rpx;
padding: 0 16rpx;
box-sizing:content-box;
display:inline-block; /* 设置行内块元素 */
position: relative;
}
.scroll-view view image {
width:200rpx;
height:200rpx;
border-radius: 10rpx;
opacity: .9;
}
.scroll-view view text {
font-size: 32rpx;
font-weight: bold;
color: #fff;
position: absolute;
bottom: 20rpx;
left: 40rpx;
}js 文件：
// pages/index/index.js
Page({
data: {
scroll: [
{
img: "https://***.png_200x200q80.jpg",
title: '北京'
},
{
img: "https://***.jpg_.webp",
title: '上海'
},
{
img: "https://***.jpg_.webp",
title: '青岛'
},
{
img: "https://***.jpg_.webp",
title: '大连'
},
{
img: "https://***.jpg_.webp",
title: '丽江'
}
]
}