【小程序】如何使用锚点实现定点跳跃

实现如下图,点击右侧的A/B/C/D....可以快速定位到该字母开头的城市列表。这类似于在html中用a标签实现的锚点跳跃功能。那在小程序中应该如何实现呢。在小程序官方文档中提到scroll-view,scroll-view有scroll-into-view这一属性

 

根据页面的实现,页面分为两大节点,滚动视图区域和定位标签

<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标签的锚点跳跃的功能

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值