|
属性名 |
类型 |
默认值 |
说明 |
|
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} |
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
示例代码
-
选中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;
}
|
本文代码 |
