微信小程序实现锚点跳转

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

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

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

3、wxml代码：

 
 
 1标签
 2标签
 3标签
 4标签
 5标签





 1标签对应内容区域
 2标签对应内容区域
 3标签对应内容区域
 4标签对应内容区域
 5标签对应内容区域

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

 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。