温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序开发中怎么实现楼层锚点跳跃

发布时间:2021-01-26 10:15:19 阅读:483 作者:小新 栏目:移动开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下小程序开发中怎么实现楼层锚点跳跃,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

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

利用: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{ height100%;} 
.content{padding-bottom20rpx; box-sizing: border-box; height100%;} 
.location{width100%;} 
.location_top{height76rpx;line-height76rpx; background#f4f4f4;color#606660;font-size28rpx;padding0 20rpx;} 
.location_bottom{height140rpx;line-height140rpx;color#d91f16;font-size28rpx;border-top2rpx #ebebeb solid; border-bottom2rpx #ebebeb solid;padding0 20rpx; align-items: center;display: -webkit-flex;} 
.address_top{height76rpx;line-height76rpx; background#f4f4f4;color#999999;font-size28rpx;padding0 20rpx;} 
.address_bottom{height88rpx;line-height88rpx; background#fff;color#000000;font-size32rpx;padding0 20rpx; border-bottom2rpx #ebebeb solid;margin-left20rpx;margin-right50rpx; } 
.location_img{width48rpx;height48rpx;position: absolute;right20rpx;top125rpx;} 
.add_city{width228rpx;height60rpx;line-height60rpx; text-align: center; border2rpx solid #ebebebcolor#000000;margin-right20rpx; } 
.add_citying{width228rpx;height60rpx;line-height60rpx; text-align: center; border2rpx solid #09bb07color#09bb07;margin-right20rpx;} 
.orientation{white-space:normal;display: inline-block; width55rpx;height:58rpx; color#999text-align: center;} 
.orientation_regionwidth55rpx;font-size20rpx;position: fixed;top220rpx; right0rpx;} 
.orientation_city{height50rpx; line-height50rpx;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) { 
 } 
})

看完了这篇文章,相信你对“小程序开发中怎么实现楼层锚点跳跃”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×