小程序scroll（小程序scrollview不能滑动）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈小程序scroll，以及小程序scrollview不能滑动对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、微信小程序之scroll-view可滚动视图区域
- 2、微信小程序scroll-view横向显示及异常显示处理
- 3、微信小程序：scroll-view滚动组件
- 4、微信小程序如何使用scroll-into-view中跳转到指定位置
微信小程序之scroll-view可滚动视图区域
组件说明:
可滚动视图区域。
组件用法：
纵向滚动用法
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横向显示及异常显示处理
在微信小程序开发过程中，我们会经常使用到scroll-view组件，有时我们要在scroll-view中水平显示列表，类似这样：
但是当我们设置了scroll-view的flex-direction:row;等属性时，会发现没有用，列表依然垂直显示，像这样：
主要是因为display:flex;等属性对于scroll-view来说是没有用的，此时我们只需要设置子试图的属性display: inline-block;即可，不需要设置scroll-view的flex属性。
但是当我们设置完成后可能会出现一下情况：
会发现列表好像没有对齐，有两个子试图错位了，接下来我们可以通过设置子属性vertical-align:top;来解决，最后会得到我们想要的效果。
微信小程序：scroll-view滚动组件
在开发微信小程序时，有时一些视图在手机指定的宽度和高度不够存放，那么可以放在scroll-view中。
在给scroll-view设置滚动的时候，分为三个步骤：
在给scroll-view设置滚动的时候，分为两个步骤：
滚动到指定的id元素位置，并且给滚动的过程添加动画
微信小程序如何使用scroll-into-view中跳转到指定位置
微信小程序中scroll-into-view跳转到指定位置是这样使用的：
1、首先第一步，打开微信开发者工具。
2、其次第二步，打开wxml文件，然后在文件里先新建一个scroll-view的标签即可。
3、再次第三步，设置这个scroll-into-view滚动的方向设置为x轴，与此同时设置scroll-into-view的值，这个值就是子元素中的id，表示滚动到哪一个元素，如下图所示。
4、接下来就是设置子元素，先新建一个view的子元素，然后设置class和id，并且多设置几个view标签，以便观察效果。
5、最后一步，点击打开模拟器，在下面我们就可以看到滚动的元素，接着就按照我们之前设置的显示就行了。
小程序scroll的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序scrollview不能滑动、小程序scroll的信息别忘了在本站进行查找喔。
