微信小程序 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 实现锚点跳转的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序基于scroll-view实现锚点定位
代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序自定义底部导航栏组件+跳转
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
- 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面
如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',}) 不起作用,需要使用 w ...
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...
- 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转
在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...
- 关于微信小程序获取view的动态高度填坑
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...
- 微信小程序如何实现点击链接跳转到手机自带浏览器
最近遇到一个需求.公司有一个业务,制作的小程序需要跳出微信打开一个指定的我们自己的页面,拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的第三方开发文档我们都查阅过资料但是最终只找 ...
- 微信小程序 - 配置普通二维码跳小程序
普通二维码跳小程序规则: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8A%9F%E8%83%B ...
- 微信小程序页面列表与详情页跳转的正确姿势
初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...
随机推荐
- python + slenium自动化测试设置元素等待
WebDriver 提供了两种类型的等待:显式等待和隐式等待. 显式等待 显式等待使 WebdDriver 等待某个条件成立时继续执行,否则在达到最大时长时抛出超时异常 (TimeoutExcepti ...
- python 全栈开发,Day14(列表推导式,生成器表达式,内置函数)
一.列表生成式 生成1-100的列表 li = [] for i in range(1,101): li.append(i) print(li) 执行输出: [1,2,3...] 生成python1期 ...
- 步步为营-11-List<T>泛型的简单练习
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 调用write方法打印语句到浏览器
1.document.write("我爱学习--喜欢学习"); // 在浏览器中输出的结果为:我爱学习--喜欢学习 2.首先,声明一个变量. var str="h ...
- asp.net core配置文件
读取配置文件 asp.net core使用appsettings.json代替传统.net framework的web.config中的<appSettings>节点.它的数据格式变成了j ...
- BZOJ2325 [ZJOI2011]道馆之战 树链剖分 线段树
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2325 题意概括 给你一棵N个点的树,树上的每个节点有A,B两块区域,且每种区域有两种状态:可以走的 ...
- POJ1487 Single-Player Games 高斯消元
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ1487 题解概括 给出多个树形结构,由小写字母和数字表示,每个小写字母表示一棵小树.现在,以a为根节点 ...
- BZOJ1059 [ZJOI2007]矩阵游戏 二分图匹配 匈牙利算法
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1059 题意概括 有一个n*n(n<=200)的01矩阵,问你是否可以通过交换整行和整列使得左 ...
- 【noip模拟赛5】细菌
描述 近期,农场出现了D(1<=D<=15)种细菌.John要从他的 N(1<=N<=1,000)头奶牛中尽可能多地选些产奶.但是如果选中的奶牛携带了超过 K (1<=K ...
- 【Java】 剑指offer(56-1) 数组中只出现一次的两个数字
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程 ...