微信小程序实现锚点定位楼层跳跃的实例


Posted in Javascript onMay 18, 2017

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

利用: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 wx:for="{{item.city}}"> 
   <view class="address_bottom">{{item.name}}</view> 
  </view> 
 </view> 
</scroll-view> 
<view class="orientation_region"> 
 <view class="orientation">自动定位</view> 
 <block wx:for="{{orientationList}}" > 
  <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view> 
 </block> 
</view>

WXSS:

page{ height: 100%;} 
.content{padding-bottom: 20rpx; box-sizing: border-box; height: 100%;} 
.location{width: 100%;} 
.location_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #606660;font-size: 28rpx;padding: 0 20rpx;} 
.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size: 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid;padding: 0 20rpx; align-items: center;display: -webkit-flex;} 
.address_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #999999;font-size: 28rpx;padding: 0 20rpx;} 
.address_bottom{height: 88rpx;line-height: 88rpx; background: #fff;color: #000000;font-size: 32rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 20rpx;margin-right: 50rpx; } 
.location_img{width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 125rpx;} 
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; } 
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;} 
.orientation{white-space:normal;display: inline-block; width: 55rpx;height:58rpx; color: #999; text-align: center;} 
.orientation_region{ width: 55rpx;font-size: 20rpx;position: fixed;top: 220rpx; right: 0rpx;} 
.orientation_city{height: 50rpx; line-height: 50rpx;color: #000;text-align: center;}

JS:

Page({ 
 /** 
  * 页面的初始数据 
  */ 
 data: { 
  orientationList: [ 
   { id: "01", region: "东北" }, 
   { id: "02", region: "华北" }, 
   { id: "03", region: "华东" }, 
   { id: "04", region: "华南" }, 
   { id: "05", region: "华中" }, 
   { id: "06", region: "西北" }, 
   { id: "07", region: "西南" } 
  ], 
  act_addList: [ 
   { 
    id: "01", region: "东北地区", 
    city: [{ id: "0101", name: "白山江源" }, 
    { id: "0102", name: "白山市" }, 
    { id: "0103", name: "宾县" }, 
    { id: "0104", name: "大庆" }, 
    { id: "0105", name: "测试1" }, 
    { id: "0106", name: "测试2" }, 
    { id: "0107", name: "测试3" }, 
    { id: "0108", name: "测试4" }, 
    { id: "0109", name: "测试5" }, 
    { id: "0110", name: "测试6" }, 
    ] 
   }, 
   { 
    id: "02", region: "华北地区", 
    city: [{ id: "0201", name: "包头" }, 
    { id: "0202", name: "保定" }, 
    { id: "0206", name: "测试2" }, 
    { id: "0207", name: "测试3" }, 
    { id: "0208", name: "测试4" }, 
    { id: "0209", name: "测试5" }, 
    { id: "0210", name: "测试6" }, 
    ] 
   }, 
   { 
    id: "03", region: "华东地区", 
    city: [{ id: "0303", name: "开封市" }, 
    { id: "3104", name: "安阳市" },] 
   }, 
   { 
    id: "04", region: "华南地区", 
    city: [ 
     { id: "0401", name: "黑龙江市" }, 
     { id: "0407", name: "测试3" }, 
     { id: "0508", name: "测试4" }, 
     { id: "0609", name: "测试5" }, 
     { id: "0710", name: "测试6" }, 
     { id: "0711", name: "测试8" }, 
     { id: "0712", name: "测试9" }, 
     { id: "0713", name: "测试10" }, 
     { id: "0714", name: "测试11" }, 
    ] 
   }, 
   { id: "05", region: "华中地区", city: [{ id: "0501", name: "黑龙江市" }] }, 
   { 
    id: "06", region: "西北地区", 
    city: [{ id: "0603", name: "开封市" }, 
    { id: "0604", name: "安阳市" },] 
   }, 
   { 
    id: "07", region: "西南地区", 
    city: [{ id: "0703", name: "开封市" }, 
    { id: "0704", name: "安阳市" }, 
    { id: "0401", name: "黑龙江市" }, 
    { id: "0407", name: "测试3" }, 
    { id: "0508", name: "测试4" }, 
    { id: "0609", name: "测试5" }, 
    { id: "0710", name: "测试6" }, 
    { id: "0711", name: "测试8" }, 
    { id: "0712", name: "测试9" }, 
    { id: "0713", name: "测试10" }, 
    { id: "0714", name: "测试11" }, 
    { id: "0401", name: "黑龙江市" }, 
    { id: "0407", name: "测试3" }, 
    { id: "0508", name: "测试4" }, 
    { id: "0609", name: "测试5" }, 
    { id: "0710", name: "测试6" }, 
    { id: "0711", name: "测试8" }, 
    { id: "0712", name: "测试9" }, 
    { id: "0713", name: "测试10" }, 
    { id: "0714", name: "测试11" }, 
    ] 
   }, 
  ], 
  toView: 'inToView01', 
 }, 
 scrollToViewFn: function (e) { 
  var _id = e.target.dataset.id; 
  this.setData({ 
   toView: 'inToView' + _id 
  }) 
  console.log(this.data.toView) 
 }, 
 onLoad: function (options) { 
 } 
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
jquery高效反选具体实现
May 05 Javascript
javascript实用方法总结
Feb 06 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 #Javascript
AngularJS折叠菜单实现方法示例
May 18 #Javascript
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
easyUI下拉列表点击事件使用方法
May 18 #Javascript
AngularJS自定义指令之复制指令实现方法
May 18 #Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 #Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 #Javascript
You might like
php在文件指定行中写入代码的方法
2012/05/23 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php防止sql注入的方法详解
2017/02/20 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python实现爬虫下载美女图片
2015/07/14 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
美国创意之家:BulbHead
2017/07/12 全球购物
公司地址变更通知
2015/04/25 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers