转:【微信小程序】实现锚点定位楼层跳跃的实例
微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃:
利用:scroll-into-view 来实现;
效果图:
wxml:
<scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
<view wx:for="{{act_addList}}">
<view class="address_top" id="{{ 'inToView'+item.id}}">{{item.region}}</view>
</view>
</scroll-view> <view class="orientation_region">
<block wx:for="{{orientationList}}" >
<view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>
</block>
</view>
JS:
Page({
/**
* 页面的初始数据
*/
data: {
orientationList: [
{ id: "01", region: "东北" },
{ id: "02", region: "华北" },
{ id: "03", region: "华东" },
{ id: "04", region: "华南" },
], toView: 'inToView01',
}
scrollToViewFn: function (e) {
var _id = e.target.dataset.id;
this.setData({
toView: 'inToView' + _id
})
console.log(this.data.toView)
},
onLoad: function (options) {
} })
3、原理:通过点击瞄点,获取瞄点的id,传给瞄点对应的<view id="{{瞄点id}}">的div,
然后在scorll-view的滚动中,自动跳跃到对应的子div中
转:【微信小程序】实现锚点定位楼层跳跃的实例的更多相关文章
- 微信小程序:获取地理定位和显示相应的城市名称。
最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案 ...
- 微信小程序开发demo-地图定位
要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到”当前位置经纬度“ getLocation: function ( ...
- 微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...
- 微信小程序 功能函数 地图定位相对直线距离
GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / ...
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 微信小程序案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- 微信小程序源码案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- 微信小程序--火车票查询
微信小程序--火车票查询 写在最前面 微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了.我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心 ...
- 微信小程序(应用号)资源汇总整理
微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...
随机推荐
- Redis 3.0 Windows 安装步骤
Redis 3.0 Windows 安装步骤 ----来自 https://www.aliyun.com/jiaocheng/872572.html 发布时间:2018-04-10 来源:网络 上传者 ...
- python模块整理29-redis模块
date:20140530auth:jinhttp://github.com/andymccurdy/redis-pyhttps://github.com/andymccurdy/redis-py/b ...
- HDU 4496 D-City (并查集,水题)
D-City Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Subm ...
- 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解
在移动端,经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况. 比如说是这种 输入框未获得焦点键盘未抬起的时候: 输入框获得焦点键盘抬起的时候 这种情况下,不管是上面的textar ...
- Openfire 性能优化
Openfire 是一个XMPP协议的IM Server. Openfire使用mysql配合它不知所谓几乎无效的的Cache机制就注定无法支撑高并发, 所以第一步,将数据库切换为比较强一点的Mon ...
- Ext表格控件
表格控件其实也就是帮我们完成了数据的填充工作而已,具体的数据源.要显示的列,列的定制.数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的,所以我们分下面几步来完成网格控件的数据绑定: 1 ...
- VC获得控制台HWND GetConsoleHwnd
HWND GetConsoleHwnd(void) { #define MY_BUFSIZE 1024 // Buffer size for console window titles. HWND h ...
- 描述 Machine.Config 和 Web.Config(转载)
NET Framework 提供的配置管理包括范围广泛的设置,允许管理员管理 Web 应用程序及其环境.这些设置存储在 XML 配置文件中,其中一些控制计算机范围的设置,另一些控制应用程序特定的配置. ...
- CRF,没完全看懂
这篇文章,感觉讲的还比较浅显易懂: http://www.sohu.com/a/207085690_206784
- osglightpoint例子 [转]
该例子演示了光点的效果,主要应用osgSim库中的LightPoint.LightPointNode. SequenceGroup.BlinkSequence,osgSim库属于仿真库,扩展库.应用o ...