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