scroll-view 的属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 |
| scroll-y | Boolean | false | 允许纵向滚动 |
| upper-threshold | Number | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| scroll-top | Number | 设置竖向滚动条位置 | |
| scroll-left | Number | 设置横向滚动条位置 | |
| scroll-into-view | String | 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部 | |
| bindscrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | |
| bindscrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | |
| bindscroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
使用竖向滚动时，需要给
示例代码
-
选中pages文件夹下的detail文件夹下的detail.wxml文件,键入如下代码：
<!--scroll-view组件--> <block wx:if="{{index == 1}}"> <!--横向滚动--> <view class="menu"> <scroll-view scroll-x="true" class="top-nav"> <view class="top_btn top_btn_select">栏目1</view> <view class="top_btn">栏目2</view> <view class="top_btn">栏目3</view> <view class="top_btn">栏目4</view> <view class="top_btn">栏目5</view> <view class="top_btn">栏目6</view> <view class="top_btn">栏目7</view> <view class="top_btn">栏目8</view> </scroll-view> </view> <!--竖向滚动--> <scroll-view scroll-y="true" class="content"> <view class="cell">cell1</view> <view class="cell">cell2</view> <view class="cell">cell3</view> <view class="cell">cell4</view> <view class="cell">cell5</view> <view class="cell">cell6</view> <view class="cell">cell7</view> <view class="cell">cell8</view> </scroll-view> -
选中pages文件夹下的detail文件夹下的detail.wxss文件,键入如下代码：
/* scroll-view 组件样式 */ /* 水平 */ .menu{ position: fixed; top: 0; left: 0; z-index: 10; width: 100%; background: #fff; border-top:#eee solid 1px; border-bottom:#eee solid 1px; } .top-nav{ white-space: nowrap; display: flex; } .top_btn { display: inline-block; margin: 10px; font-size: 1rem; color: gray; } .top_btn_select { color: red; font-size: 1.5rem; } /* 垂直 */ .content{ height: 100%; width: 100%; margin-top:45px; } .cell { display: inline-block; margin: 10px 20px; width: 90%; height: 200px; border: #e9e9e9 solid 1px; text-align: center; background-color: red; color: white; }
