E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

实现如下图,点击右侧的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标签的锚点跳跃的功能

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【小程序】如何使用锚点实现定点跳跃
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏