微信小程序實現(xiàn)錨點跳轉

更新時間：2020年11月23日 10:06:27 作者：左眼皮一直跳

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)錨點跳轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)錨點跳轉的具體代碼，供大家參考，具體內容如下

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

2、主要用到的微信小程序的scroll-view 組件實現(xiàn)該效果。核心主要是使用scroll-into-view屬性跳轉對應的標簽頁和標簽內容區(qū)域和bindscroll事件監(jiān)聽標簽內容區(qū)域距離頁面頂部的距離來判斷頂部的標簽應該處于哪個標簽。

3、wxml代碼：

<!-- start 標簽區(qū)域 -->
<view class="text" style="height:{{height}}px " >
 <!-- scroll-into-view 可以跳轉到綁定值對應的ID的標簽區(qū)域 -->
 <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 標簽區(qū)域 -->

<!-- start 標簽對應內容區(qū)域 -->
<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標簽對應內容區(qū)域</view>
 <view class='scroll-view-item bg_blue' id="b1">2標簽對應內容區(qū)域</view>
 <view class='scroll-view-item bg_green' id="c1">3標簽對應內容區(qū)域</view>
 <view class='scroll-view-item bg_yellow' id="d1">4標簽對應內容區(qū)域</view>
 <view class='scroll-view-item bg_red' id="e1">5標簽對應內容區(qū)域</view>
</scroll-view>
<!-- end 標簽對應內容區(qū)域 -->

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

 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  // 標簽錨點跳轉值
  indexMaodian: 'a',
  // 標簽詳情內容錨點跳轉
  storeDetail: 'a1'
 },
 // 監(jiān)聽頁面滑動距離
 onPageScroll(e) {
  // 通過滑動的距離判斷頁面滑動那個區(qū)域讓后讓頂部的標簽欄切換到對應位置
  var height = Number(e.detail.scrollTop)
  if (height <= 400) {
   // 滑到1區(qū)域
   this.setData({
    indexMaodian: 'a'
   });
  } else if (height > 400 && height<= 800) {
   // 滑到2區(qū)域
   this.setData({
    indexMaodian: 'b'
   });
  } else if (height > 800 && height <= 1200) {
  // 滑到3區(qū)域
   this.setData({
    indexMaodian: 'c'
   });
  } else if (height > 1200 && height <= 1600) {
   // 滑到4區(qū)域 后面難得寫了，以此類推即可
   this.setData({
    indexMaodian: 'd'
   });
  }


 },
 // 跳轉到對應的標簽詳情內容區(qū)
 toDetail(e) {
  let id = e.target.dataset.id
  this.setData({
   storeDetail: id
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  var systemInfo = wx.getSystemInfoSync();
  var windowHeight = systemInfo.windowHeight;
  // 拿到導航欄以下可視區(qū)域的高度
  this.setData({
   height: windowHeight
  });
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {

 },

 /**
  * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {

 },

 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {

 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: