微信小程序 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 ...
随机推荐
- 【linux】tcpdump抓包
tcpdump -i eth0 host 192.168.11.22 -w ./target.cap 上面指令,抓取eth0中与192.168.11.22相关的流量,保存到target.cap中
- poj2279 线性dp
#include<iostream> #include<cstdio> #include<cstring> #define ll long long using n ...
- python接口自动化测试二十:函数写接口测试
# coding:utf-8import requestsimport refrom bs4 import BeautifulSoup # s = requests.session() # 全局的s ...
- 通过Headless模式执行selenium脚本
我们在通过Selenium运行自动化测试时,必须要启动浏览器,浏览器的启动与关闭必然会影响执行效率,而且还会干扰你做其它事情(本机运行的话) Chrome Headless模式 Python Sele ...
- Lucene.Net简单例子-01
前面已经简单介绍了Lucene.Net,下面来看一个实际的例子 1.1 引用必要的bll文件.这里不再介绍(Lucene.Net PanGu PanGu.HightLight PanGu.Luc ...
- 成员变量传参,jion方法的使用
package charpter06; //MyThread02和MyThread01两个类 相互调用的结果public class MyThread01 extends Thread { // 用全 ...
- 使用super调用父类的构造方法
package com.bjpowernode.t02inheritance.c09; /* * 使用super调用父类的构造方法 */public class TestSuper02 { publi ...
- 《Java程序性能优化》之设计优化
豆瓣读书:http://book.douban.com/subject/19969386/ 第一章 Java性能调优概述 1.性能的参考指标 执行时间: CPU时间: 内存分配: 磁盘吞吐量: 网络吞 ...
- Codeforces Round #144 (Div. 2) D table
CodeForces - 233D 题目大意给你一个n*m 的矩阵,要求你进行涂色,保证每个n*n的矩阵内都有k个点被涂色. 问你一共有多少种涂色方案. n<=100 && m& ...
- BZOJ1076 [SCOI2008]奖励关 概率 状态压缩动态规划
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1076 题意概括 有n个东西,k次扔出来.每次等概率扔出其中一个. 你可以拿这个东西,但是有条件,得 ...