在微信小程序中,使用 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 实现锚点跳转的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 微信小程序基于scroll-view实现锚点定位

    代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  4. 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

    如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 w ...

  5. 微信小程序详解——页面之间的跳转方式【路由】和参数传递

    微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...

  6. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...

  7. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  8. 微信小程序如何实现点击链接跳转到手机自带浏览器

    最近遇到一个需求.公司有一个业务,制作的小程序需要跳出微信打开一个指定的我们自己的页面,拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的第三方开发文档我们都查阅过资料但是最终只找 ...

  9. 微信小程序 - 配置普通二维码跳小程序

    普通二维码跳小程序规则: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8A%9F%E8%83%B ...

  10. 微信小程序页面列表与详情页跳转的正确姿势

    初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...

随机推荐

  1. 【转】ssh服务器启动和客户端常用操作

    前言 简单的来说,SSH 是 Secure SHell protocol 的简写 (安全的壳程序协议),它可以透过数据封包加密技术,将等待传输的封包加密后再传输到网络上, 因此,数据讯息当然就比较安全 ...

  2. 【开源小软件 】Bing每日壁纸 让桌面壁纸保持更新

    发布一个开源小软件,Bing每日壁纸. 该小软件可以自动获取Bing的精美图片设置为壁纸,并且支持随机切换历史壁纸,查看壁纸故事. 欢迎大家下载使用,点star!有问题请留言或者提issue. 开源地 ...

  3. Codeforces 138C Mushroom Gnomes - 2 线段树

    Mushroom Gnomes - 2 感觉没啥东西, 用线段树算算每个被覆盖的概率, 坑点是有很多个在同一个点. #include<bits/stdc++.h> #define LL l ...

  4. 【noip模拟赛4】找啊找啊找BF 拓扑排序

    描述 sqybi上次找GF的工作十分不成功,于是依旧单身的他在光棍节前的某天突发奇想,要给自己找一个BF(这里指的是男性的好朋友……),这样既可以和人分享内心的压抑(路人甲:压抑还分享么……),也可以 ...

  5. 第七章|7.4并发编程| I/O模型

    I/O模型 协程是单线程下的并发,并不是对性能都有所提升,一定是监测单个线程下的多个任务的I/O,遇到I/O不要让它阻塞,给它自动切换到其他任务去,这样就能提高单个线程下的运行效率.--->&g ...

  6. sklearn.preprocessing.LabelEncoder的使用

    在训练模型之前,我们通常都要对训练数据进行一定的处理.将类别编号就是一种常用的处理方法,比如把类别"男","女"编号为0和1.可以使用sklearn.prepr ...

  7. Python 导入requests报错No module named requests

    刚开始是在Pycharm里面,发现就是不对,导入老提示No module named requests这个错误.后面发现是指向的python.exe路径不对,到setting里面设置换一下路径就好.

  8. Socket进程通信机制

    1.Socket通常称为“套接字”,用于描述IP地址和端口,是一个通信链的句柄. 2.应用程序通过套接字向网络发出请求或者应答网络请求. 3.Socket既不是一个程序,也不是一种协议,其只是操作系统 ...

  9. php特别值

    if(!isset($lichi)){ echo'未定义'; if(empty($lichi)){ echo '未定义的显示为空的';//最终会走到这来 } } 手册类型比较表 empty为真$x = ...

  10. macbook安装并破解Clion2018(Pycharm也一样)

    一.下载 Clion 并安装 二.修改hosts文件,使用 vim /private/etc/hosts 命令将 0.0.0.0 account.jetbrains.com 粘贴进去(提示: i键是插 ...