小程序开发中怎么实现楼层锚点跳跃
创始人
2024-11-25 13:41:48
0次

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

利用:scroll-into-view 来实现

效果图如下:

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

WXML:

 
  
  {{item.region}} 
   
   {{item.name}} 
   
  
 
 
 自动定位 
  
  {{item.region}} 
  

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) { 
 } 
})

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...