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


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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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/12/06 PHP
再次研究下cache_lite
2007/02/14 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python写日志封装类实例
2015/06/28 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
网络教育毕业生自我鉴定
2013/10/10 职场文书
个人求职信范文分享
2014/01/06 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
春风行动实施方案
2014/03/28 职场文书
公司节能减排倡议书
2014/05/14 职场文书
工作检讨书怎么写
2015/01/23 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL