微信小程序之scroll-view可滚动视图区域
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序之scroll-view可滚动视图区域相关的知识，希望对你有一定的参考价值。
参考技术A 组件说明:可滚动视图区域。
组件用法：
纵向滚动用法
Tip:
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。
当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）
当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：
wxml
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="toView" scroll-top="scrollTop">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>
js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page(
data:
toView: 'green',
scrollTop: 100,
scrollLeft: 0
,
//滚动条滚到顶部的时候触发
upper: function(e)
console.log(e)
,
//滚动条滚到底部的时候触发
lower: function(e)
console.log(e)
,
//滚动条滚动后触发
scroll: function(e)
console.log(e)
,
//点击按钮切换到下一个view
tap: function(e)
for (var i = 0; i < order.length; ++i)
if (order[i] === this.data.toView)
this.setData(
toView: order[i + 1]
)
break
,
//通过设置滚动条位置实现画面滚动
tapMove: function(e)
this.setData(
scrollTop: this.data.scrollTop + 10
)
)
css
.scroll-view_H
white-space: nowrap;
.scroll-view-item
height: 200px;
.scroll-view-item_H
display: inline-block;
width: 100%;
height: 200px;
横向滚动用法
Tip:
横向滚动无法使用scroll-into-view属性。
当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）
当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：
wxml
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-left="scrollLeft">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page(
data:
toView: 'green',
scrollTop: 100,
scrollLeft: 0
,
//滚动条滚到顶部的时候触发
upper: function(e)
console.log(e)
,
//滚动条滚到底部的时候触发
lower: function(e)
console.log(e)
,
//滚动条滚动后触发
scroll: function(e)
console.log(e)
,
//点击按钮切换到下一个view
tap: function(e)
for (var i = 0; i < order.length; ++i)
if (order[i] === this.data.toView)
this.setData(
toView: order[i + 1]
)
break
,
//通过设置滚动条位置实现画面滚动
tapMove: function(e)
this.setData(
scrollLeft: this.data.scrollLeft + 10
)
)
wxss
.scroll-view_H
white-space: nowrap;
.scroll-view-item
height: 200px;
.scroll-view-item_H
display: inline-block;
width: 100%;
height: 200px;
主要属性：
属性类型默认值描述
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件
bindscrollEventHandle滚动时触发，event.detail = scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY
以上是关于微信小程序之scroll-view可滚动视图区域的主要内容，如果未能解决你的问题，请参考以下文章