脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序 scroll-view 锚点

微信小程序 scroll-view 实现锚点跳转功能

 更新时间：2019年12月12日 10:56:17   作者：古兰精  
这篇文章主要介绍了微信小程序 scroll-view 实现锚点跳转功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中没有例子演示，锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性。

　　实现锚点跳转主要以下几点：

　　1、最外层容器使用 scroll-view

　　2、赋值scroll-into-view，如：<scroll-view scroll-into-view="{{toView}}">

　　3、设置 scroll-view 滚动方向 scroll-y="true"

　　4、跳转到的位置使用 id (定位)，如：<view id="mark1">

<view class="list">
  <view bindtap=‘jumpTo‘ data-opt="list0">list0</view>
  <view bindtap=‘jumpTo‘ data-opt="list11">list11</view>
  <view bindtap=‘jumpTo‘ data-opt="list29">list29</view>
</view>
<scroll-view scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
  <view wx:for="{{list}}" id="{{item}}" class="test">
   {{item}}
  </view>
</scroll-view>

 data: {
  list: ["list0", "list1", "list2"],
  toView: ‘‘
 },
 jumpTo: function (e) {
  // 获取标签元素上自定义的 data-opt 属性的值
  let target = e.currentTarget.dataset.opt;
  this.setData({
   toView: target
  })
 },

总结

以上所述是小编给大家介绍的微信小程序 scroll-view 实现锚点跳转功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • javascript 原型模式实现OOP的再研究

    javascript 原型模式实现OOP的再研究

    目前网络上有关javascript实现OOP模式的方案基本上都是prototype模式，一般性的示例代码如下
    2009-04-04
  • JavaScript中object和Object的区别(详解)

    JavaScript中object和Object的区别(详解)

    下面小编就为大家带来一篇JavaScript中object和Object的区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 详解如何在在浏览器中使用WebRTC获取用户IP地址

    详解如何在在浏览器中使用WebRTC获取用户IP地址

    如果需要在程序中获取当前用户的IP,通常手段都是需要使用服务器,但现在借助WebRTC的强大功能,我们可以直接在浏览器客户端获取用户IP,所以本文小编将给大家介绍一下如何在在浏览器中使用WebRTC获取用户IP地址,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2023-11-11
  • 微信小程序静默登录的实现代码

    微信小程序静默登录的实现代码

    这篇文章主要介绍了微信小程序静默登录的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • js return返回多个值,通过对象的属性访问方法

    js return返回多个值,通过对象的属性访问方法

    下面小编就为大家带来一篇js return返回多个值,通过对象的属性访问方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 分享ES6 20个经常使用技巧

    分享ES6 20个经常使用技巧

    这篇文章主要分享ES6 20个经常使用技巧，作用是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，具体使用详情需要的小伙伴可以参考下面文章内容
    2022-06-06
  • List Installed Hot Fixes

    List Installed Hot Fixes

    List Installed Hot Fixes...
    2007-06-06
  • javascript创建函数的20种方式汇总

    javascript创建函数的20种方式汇总

    这篇文章主要介绍了javascript创建函数的20种方式汇总的相关资料,需要的朋友可以参考下
    2015-06-06
  • ES6新特性之解构、参数、模块和记号用法示例

    ES6新特性之解构、参数、模块和记号用法示例

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
    2017-04-04
  • javaScript 判断字符串是否为数字的简单方法

    javaScript 判断字符串是否为数字的简单方法

    javascript在通过parseIn或parseFloat将字符串转化为数字的过程中，如果字符串中包含有非数字，那么将会返回NaN，参考下面代码
    2009-07-07

最新评论