微信小程序实现锚点跳转


Posted in Javascript onNovember 23, 2020

本文实例为大家分享了微信小程序实现锚点跳转的具体代码,供大家参考,具体内容如下

1、先上效果图,看看是不是你想要的。

微信小程序实现锚点跳转

2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签。

3、wxml代码:

<!-- start 标签区域 -->
<view class="text" style="height:{{height}}px " >
 <!-- scroll-into-view 可以跳转到绑定值对应的ID的标签区域 -->
 <scroll-view class='scroll-x-view1' scroll-x='true' scroll-into-view='{{indexMaodian}}'>
 <view bindtap="toDetail" data-id="a1" class='scroll-view-item1 bg_red' id="a" >1标签</view>
 <view bindtap="toDetail" data-id="b1" class='scroll-view-item1 bg_blue' id="b">2标签</view>
 <view bindtap="toDetail" data-id="c1" class='scroll-view-item1 bg_green' id="c">3标签</view>
 <view bindtap="toDetail" data-id="d1" class='scroll-view-item1 bg_yellow' id="d">4标签</view>
 <view bindtap="toDetail" data-id="e1" class='scroll-view-item1 bg_red' id="e">5标签</view>
</scroll-view>
<!-- end 标签区域 -->

<!-- start 标签对应内容区域 -->
<scroll-view class='scroll-x-view' scroll-y='true' bindscroll="onPageScroll" scroll-into-view='{{storeDetail}}'>
 <view class='scroll-view-item bg_red' id="a1">1标签对应内容区域</view>
 <view class='scroll-view-item bg_blue' id="b1">2标签对应内容区域</view>
 <view class='scroll-view-item bg_green' id="c1">3标签对应内容区域</view>
 <view class='scroll-view-item bg_yellow' id="d1">4标签对应内容区域</view>
 <view class='scroll-view-item bg_red' id="e1">5标签对应内容区域</view>
</scroll-view>
<!-- end 标签对应内容区域 -->

</view>

4、wxss代码:

.text{
 width: 100%;
 display: flex;
 flex-direction: column;
}
.scroll-x-view {
 width: 100%;
 display: flex;
 flex: 1;
}
.scroll-x-view .scroll-view-item {
 margin-top: 50rpx;
 width: 750rpx;
 height: 800rpx;
 display:inline-block;
}
.bg_red {
 background: lightpink;
}
.bg_blue {
 background: lightblue;
}
.bg_green {
 background: lightgreen;
}
.bg_yellow {
 background: lightyellow;
}
.scroll-x-view1 {
 width: 100%;
 height: 100rpx;
 white-space: nowrap;
}
.scroll-x-view1 .scroll-view-item1 {
 width: 400rpx;
 height: 100rpx;
 display:inline-block;
}

5、js代码:

Page({

 /**
  * 页面的初始数据
  */
 data: {
  // 标签锚点跳转值
  indexMaodian: 'a',
  // 标签详情内容锚点跳转
  storeDetail: 'a1'
 },
 // 监听页面滑动距离
 onPageScroll(e) {
  // 通过滑动的距离判断页面滑动那个区域让后让顶部的标签栏切换到对应位置
  var height = Number(e.detail.scrollTop)
  if (height <= 400) {
   // 滑到1区域
   this.setData({
    indexMaodian: 'a'
   });
  } else if (height > 400 && height<= 800) {
   // 滑到2区域
   this.setData({
    indexMaodian: 'b'
   });
  } else if (height > 800 && height <= 1200) {
  // 滑到3区域
   this.setData({
    indexMaodian: 'c'
   });
  } else if (height > 1200 && height <= 1600) {
   // 滑到4区域 后面难得写了,以此类推即可
   this.setData({
    indexMaodian: 'd'
   });
  }


 },
 // 跳转到对应的标签详情内容区
 toDetail(e) {
  let id = e.target.dataset.id
  this.setData({
   storeDetail: id
  })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var systemInfo = wx.getSystemInfoSync();
  var windowHeight = systemInfo.windowHeight;
  // 拿到导航栏以下可视区域的高度
  this.setData({
   height: windowHeight
  });
 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS生成不重复随机数组的函数代码
Jun 10 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
C++中的string类的用法小结
Aug 07 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
AngularJS中的promise用法分析
May 19 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
javascript实现电商放大镜效果
Nov 23 #Javascript
用webAPI实现图片放大镜效果
Nov 23 #Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
JavaScript实现网页留言板功能
Nov 23 #Javascript
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
js观察者模式的弹幕案例
Nov 23 #Javascript
js异步接口并发数量控制的方法示例
Nov 22 #Javascript
You might like
PHP与SQL注入攻击[一]
2007/04/17 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python笔记之观察者模式
2019/11/20 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
学校读书活动总结
2014/06/30 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
消防宣传语大全
2015/07/13 职场文书
Python类方法总结讲解
2021/07/26 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers