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


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 使用手册(三)
Sep 23 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
javascript变量声明实例分析
Apr 25 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 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中的 == 运算符进行字符串比较
2006/11/26 PHP
php curl的深入解析
2013/06/02 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
在django模板中实现超链接配置
2019/08/21 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
会计自荐书
2013/12/02 职场文书
如何写好自荐信
2014/04/07 职场文书
我爱我家教学反思
2014/05/01 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
综合素质自我评价评语
2015/03/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
调解协议书范本
2016/03/21 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL