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

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

利用: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) {
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • 微信小程序 input输入框控件详解及实例(多种示例)

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • 微信小程序 实现列表刷新的实例详解

    微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

  • 微信小程序(应用号)简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序 参数传递详解

    微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

  • 微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

  • 微信小程序 for 循环详解

    1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

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

    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}}&

  • 微信小程序实现锚点定位功能的方法实例

    前言 在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果: 功能实现 采用小程序视图容器组件实现:scroll-view 这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码: <scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}"

  • 微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

    本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果 实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f

  • 微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 微信小程序实现锚点跳转

    本文实例为大家分享了微信小程序实现锚点跳转的具体代码,供大家参考,具体内容如下 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签. 3.wxml代码: <!-- start 标签区域 --> <view class="text" style=&

  • 微信小程序 swiper组件构建轮播图的实例

    微信小程序 swiper组件构建轮播图的实例 实现效果图: wxml基础文件: <view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src=&qu

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

  • 微信小程序开发一键登录 获取session_key和openid实例

    微信小程序开发一键登录 获取session_key和openid实例 思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz'

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

随机推荐