微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 

利用: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中

转:【微信小程序】实现锚点定位楼层跳跃的实例的更多相关文章

  1. 微信小程序:获取地理定位和显示相应的城市名称。

    最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案                                                          ...

  2. 微信小程序开发demo-地图定位

    要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到”当前位置经纬度“ getLocation: function ( ...

  3. 微信小程序 this和that详解及简单实例

    微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...

  4. 微信小程序 功能函数 地图定位相对直线距离

      GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / ...

  5. 微信小程序源码推荐

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  6. 微信小程序案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...

  7. 微信小程序源码案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...

  8. 微信小程序--火车票查询

    微信小程序--火车票查询 写在最前面 微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了.我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心 ...

  9. 微信小程序(应用号)资源汇总整理

    微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...

随机推荐

  1. kali下更新软件时,总是报错,说下列签名无效 解决办法

    解决办法就是重新获取下签名key wget -q -O - https://archive.kali.org/archive-key.asc | apt-key add

  2. 【资料】wod食物

    注意:1. 除非另外注明, 所有效果持续时间为整个地城2. 某几样食物若使用午饭时间技能, 效果只有LV1 (lunch level -25), 请小心服用. X技能等级 = 技能等级 焖豆属性奖励体 ...

  3. EntityFramework:迁移工具入门

    背景 刚毕业做项目的时候,没有用“迁移”这个概念,系统发布和更新的过程让人非常痛苦,在学习 Ruby On Rails 的过程解除了“迁移”,以后的所有项目都会先确定好“迁移”的方案,本文介绍一下En ...

  4. RxJava 和 RxAndroid (生命周期控制和内存优化)

    RxJava使我们很方便的使用链式编程,代码看起来既简洁又优雅.但是RxJava使用起来也是有副作用的,使用越来越多的订阅,内存开销也会变得很大,稍不留神就会出现内存溢出的情况,这篇文章就是介绍Rxj ...

  5. matlab 图像常用函数

    Canny function [ canny ] = canny( rgb ) temp=rgb2gray(rgb); canny=edge(temp,'canny'); end 灰度 temp=rg ...

  6. 解决win8/8.1系统安装.net framework 3.5出现0x800F0906代码错误

    解决方案一. 首先打开windows更新,检查是否有系统更新要安装,因为这个问题可能是导致.net 3.5无法安装的罪魁祸首,要检查windows更新,可以右键“这台电脑”点击“属性”,打开后,点击左 ...

  7. poj 1330 Nearest Common Ancestors 题解

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24618   Accept ...

  8. OpenJudge 8782 乘积最大——S.B.S

    8782:乘积最大 总时间限制: 1000ms 内存限制:  65536kB 描述 今年是国际数学联盟确定的“2000——世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江 ...

  9. Linux C 网络编程 - 获取本地 ip 地址,mac,通过域名获取对应的 ip

    获取本地 ip 地址,mac,通过域名获取对应的 ip, 是网络编程可能遇到的比较常见的操作了,所以总结如下(封装了3个函数), 直接上代码: #include <stdio.h> #in ...

  10. Google Scholar 论文参考文献的自动生成

    写论文经常需要写出参考文献,各种格式实在是麻烦的不行啊,在网上看到一个参考文献自动生成的博客,现在转载下来,以备以后自已能用. 主要是使用Google Scholar. Step 1: 打开Googl ...