根据页面的实现，页面分为两大节点，滚动视图区域和定位标签
<scroll-view>......</<scroll-view> //这里面写页面的其他所有内容
<view>......</view> //这里面写快速定位的A/B/C/D...
<scroll-view>根据页面又分为三层，搜索框层，热门城市层，按照字母排序的所有城市层，按照个人需求去实现
接下来讲如何实现锚点的定点跳跃，scroll-view的属性scroll-into-view用来定义scroll-view滚动到哪个区域显示，所以每块以字母开头的城市列表区域的id与scroll-into-view的值是绑定关系，而定位的标签用来改变scroll-into-view的值
实现步骤：
1. scroll-view 设置属性
scroll-y=‘true’运行其竖向滚动，scroll-with-animation=‘true’显示滚动动画，scroll-into-view与变量toView绑定。
2.定义好每一个需要被快速定位的区域的ID名，如下的 inToViewFind、inToViewhot、inToViewA、inToViewB、inToViewC......
3.将定位标签A/B/C/D...绑定好点击事件bindtap='scrollToViewFn'
在methods里面写好该点击事件
scrollToViewFn(e) {
var _id = e.target.dataset.id
this.toView='inToView' + _id
this.$apply()
}
4.将变量toView初始化为inToViewFind
在data里面初始化toView的值
data ={
toView:'inToViewFind'
}
这样便可以实现html里面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 = 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}
微信小程序实现页面内的跳转——scroll-view
需求：在页面内我们常常会写这样一个效果，一个a标签href=”#id” 点击会跳转到本页面的某个模块。微信小程序里我们要实现这个效果需要用到scroll-view组件
官方组件介绍：/debug/wxadoc/dev/component/scroll-view.html?t=2017112
问题：我第一次尝试这个组件的时候应用到自己的项目里发现完全没有反应
然后我开始检查我的代码：
Scroll-y=”true”设置--ok
目标元素Id设置--ok
Scroll-into-view点击跳转时设置为id--ok
将scroll-view组件包裹在整个页面外面并且设置高度为整个页面的高度--ok
表面看完全遵从官方文档，但在我把官方给出的例子看了之后对这个组件有了更清楚的认识，我意识到他其实给我之前写的图片轮播用了一样的思路，在固定大小的视觉窗口里有一个超出这个窗口大小的页面，通过滚动这个大页面的位置让它的不同部位显示在窗口的可视部分这就给我们造成了页面或图片其实是在滚动的感觉。
Scroll-view的官方介绍里说需要给scroll-view组件一个固定高度就是这个意思，所以我其实不应该设置scroll-view的固定高度为整个页面的高度，只需要设置为整个屏幕的可视区域高度就可以了。
就像上面这张图展示的，scroll-view组件的高度要设置为移动设备屏幕可视区域高度。
而得到设备高度就又需要微信小程序提供的API：wx.getSystemInfo
/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject
Js页
Page({
onLoad:function(){
var that=this
wx.getSystemInfo({
success: function(res) {
that.setData({
systemInfo:res
})
that.update()
}
})
},
data:{
viewID:'main',
systemInfo:{}
},
toBuyCar:function(){
var id='buyCar'
this.setData({
viewID:id
})
}
})
页面上wxml
<scroll-view style="height:{{systemInfo.windowHeight}}px" scroll-into-view="{{viewID}}" scroll-y="true">
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）