可滚动视图渗扮区域。
组件用法：
纵向滚动用法
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 = 0i <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 = 0i <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}
方法/步骤双击小程序开发者工具，打开小程序开发者工具，我们可以看到在启动界面，有很多我们之前开发过得小程序列表。
小程序横屏怎么做
我们选择其中的一个小程序进行测试，该小程序页面较多，内容较丰富，有利于我们演示横屏。
小程序横屏怎么做
首先看第一种情况，我们找到一个页面，打开该页面的json文件，可以看到，目前里面没有配置任何关于横屏的设置，界面也是竖的。
小程序横屏怎么做
然后我们在该json文件里，增加一句话【"pageOrientation": "landscape"】，这句话使得只要进入该页面，界面自动横屏，即不需要手机横过来也会强制横屏。
小程序横屏怎么做
然后我们看另一个横屏方法，打开全局变量app.json文件，在window里，目前没有看到关于横屏的设置。
小程序横屏怎么做
在window里面，加入一句话，【"pageOrientation": "auto"】，这句话加入之后，保存下文件，然后可以看到调试工具上方多了一个【旋转】按钮，如图所示，我们点击该按钮后，界面自动横过来了。
这里设置了全局变量，在手机横过来时，自动旋转所有的页面。然后我们刚才点击的【旋转】按钮，也是模拟手机的旋转功能，故界面横过来了。
如果觉得有用，记得点赞或投票！
小程序横屏怎么做
微信小程序怎样实现页面向上滑，动态加载数据的功能 在H5中，消脊当把页面备仿向上滑动时，可以发起ajax请求动态加载数据。在小程序中可以么实现么? 目前在文档中，只看到有向下拉实现动态加拿滚渗载数据的组件 可以bindscrolltoupper是滚动到顶部/左边事件欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）