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: '丽江'}]}