小程序怎么动态实现锚点

小程序怎么动态实现锚点,第1张

小程序动态实现锚点:scroll-view可以根据id跳转到指定项,可以根据你的需要对照官方文档进行设置,基本上可以通过简单的属性进行设定。

锚点功能可以使用视图容器scroll-view,其中一个属性scroll-into-view可以滚动到该属性位置。修改节点的属性的话,就是属性设置为变量,然后在事件中this.setdata设置塌扰该属性值。

对反链的区别:

我们做SEO经常关注自己网站的反向链接,一般大家都是通过雅虎反链和百度domain来查询自己的网站。如果我们做了锚文本的链接。叫雅虎收录了,这个锚文本链接就可以通过雅虎反链查询到。如果这个链接叫百度收录。

我们通过百度domain查询不到。如果我们做了一个网址链接,叫雅虎收录销乎了,我们可以通过雅虎反链查询到,如果叫百度收录了,我们通过百度domain也可以查询。团斗旦所以:锚文本的链接可以增加我们网站的雅虎反链的数量。

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

这个可以用scroll-view实现。

scroll-view可以根据id跳转到指贺指定项毁逗轿,可以根据你的需要对照官方文档进行设置,基本上可以通过简单的属性进行纤肆设定。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12537410.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存