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


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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
VUE长按事件需求详解
Oct 18 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
angular6的响应式表单的实现
Oct 10 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
详解JavaScript 高阶函数
Sep 14 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
js在IE与firefox的差异集锦
2014/11/11 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
python列表的常用操作方法小结
2016/05/21 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
如何利用python查找电脑文件
2018/04/27 Python
python opencv实现运动检测
2018/07/10 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python中itertools的用法详解
2020/02/07 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
益模软件Java笔试题
2012/03/27 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
cf收人广告词
2014/03/14 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
学习交流会主持词
2014/04/01 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
检讨书格式
2015/01/23 职场文书
护理自荐信
2019/05/14 职场文书