微信小程序選項卡切換+導(dǎo)航欄頂部懸浮

選項卡的切換還是我們經(jīng)常做的樣式，那么如果選項卡下的內(nèi)容過多，頁面滑動的時候，如何將切換的導(dǎo)航欄固定在頁面上方呢?這個我也看了網(wǎng)上的很多方案，做了很多嘗試，選項卡滑動到頁面頂部無法進行切換的問題也做了一些參照和修改，下面是修改后的效果：
頂部懸浮+選項卡切換.gif
今天特別懶，還是直接放代碼吧
  • WXML
<view style="height: {{windowHeight}}px;">
  <scroll-view bindscroll='layoutScroll' scroll-y="true" style="height: 100vh;">
  <!-- swiper頂部圖片輪播切換 -->
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" 
vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" class='swiper-home'>
      <block wx:for="{{pictures}}" data-index="{{index}}" class='block-box' wx:key="{{index}}">
        <swiper-item>
          <image src='{{item}}' class='repair-img'></image>
        </swiper-item>
      </block>
    </swiper>

    <scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}">
    <!-- 導(dǎo)航欄 -->
      <view class='topTabSwiper'>
        <view class='one-tab' data-current="0" bindtap='checkCurrent'>
          <view data-current="0" class='{{currentData == 0 ? "tab-title-select" : "tab-title"}}'>介紹</view>
          <view class='{{currentData == 0 ? "one-tab-line" : ""}}' data-current="0"></view>
        </view>
        <view class='center-tab' data-current="1" bindtap='checkCurrent'>
          <view data-current="1" class='{{currentData == 1 ? "tab-title-select" : "tab-title"}}'>推薦</view>
          <view class='{{currentData == 1 ? "two-tab-line" : ""}}' data-current="1"></view>
        </view>

        <view class='tab' data-current="2" bindtap='checkCurrent'>
          <view data-current="2" class='{{currentData == 2 ? "tab-title-select" : "tab-title"}}'>評價</view>
          <view class='{{currentData == 2 ? "one-tab-line" : ""}}' data-current="2"></view>
        </view>
      </view>

    </scroll-view>

    <!-- 切換0介紹的內(nèi)容 -->
    <view class='one-page' wx:if="{{currentData==0}}">
      <view wx:for="{{pictures}}" data-index="{{index}}" wx:key="{{index}}">
        <image src='{{item}}' class='repair-img'></image>
      </view>
    </view>

    <!-- 切換1推薦的內(nèi)容 -->
    <view class='two-page' wx:if="{{currentData==1}}">
      <view wx:for="{{recommendPictures}}" data-index="{{index}}" wx:key="{{index}}">
        <image src='{{item}}' class='recommend-img'></image>
      </view>
    </view>
    
    <!-- 切換2評價的內(nèi)容 -->
    <view class='three-page' wx:if="{{currentData==2}}">
    </view>
  </scroll-view>
</view>

<view class='evaluate' wx:if="{{currentData==2}}">評價</view>
  • WXSS
/* pages/index/repair/storeInfo.wxss */

page {
  width: 100%;
  height: auto;
  background: #f3f3f3;
}
.swiper-home {
  height: 30vh;
  width: 100%;
}
.block-box {
  height: 30vh;
  width: 100%;
}
.repair-img {
  width: 100vw;
  height: 30vh;
}
.nav {
  background: white;
  z-index: 99;
  box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
  -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}
.positionFixed {
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
  -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}

/* 這個屬性特別重要??！不然樣式會崩掉 */
.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}
.one-tab {
  width: 26vw;
  float: left;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.tab-title-select {
  color: lightcoral;
  font-size: 32rpx;
}
.tab-title {
  font-size: 32rpx;
}
.one-tab-line {
  width: 10vw;
  border-bottom: 6rpx solid lightcoral;
  margin-left: 8vw;
  margin-top: 1vh;
  margin-bottom: 0.2vh;
}
.center-tab {
  width: 48vw;
  float: left;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.two-tab-line {
  width: 10vw;
  border-bottom: 6rpx solid lightcoral;
  margin-left: 19vw;/*（48-10)/2讓紅線處在選項的中間*/
  margin-top: 1vh;
  margin-bottom: 0.2vh;
}
.tab {
  float: left;
  width: 26vw;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.one-page {
  background: white;
  margin-top: 1vh;
}
.two-page{
    background: white;
  margin-top: 1vh;
}
.recommend-img{
  width: 100vw;
  height: 36vh;
}
  • JS
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    autoplay: false, //是否自動播放
    circular: true, //是否采用銜接滑動
    indicatorDots: true, //是否顯示面板指示點
    scrollTop: '', //滑動的距離
    navFixed: false, //導(dǎo)航是否固定
    currentData: 0,
    pictures: [
      "http://pic1.win4000.com/wallpaper/7/58981aef2947c.jpg",
      "http://pic1.win4000.com/wallpaper/b/535f2c92cbe2a_270_185.jpg",
      "http://img3.imgtn.bdimg.com/it/u=143763430,3849919589&fm=15&gp=0.jpg",
      "http://img1.imgtn.bdimg.com/it/u=638880771,1982449750&fm=15&gp=0.jpg"
    ],
    recommendPictures: [
      "http://img3.imgtn.bdimg.com/it/u=338895088,3780206663&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2598427595,2652637564&fm=15&gp=0.jpg",
      "http://img1.imgtn.bdimg.com/it/u=3806547188,2585718081&fm=15&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=720416758,2573876011&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=1334930434,597258493&fm=26&gp=0.jpg"
    ]
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    var that = this;

    /** 設(shè)備信息 */
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
  },


  // 獲取當(dāng)前滑塊的index
  bindchange: function(e) {
    console.log('獲取當(dāng)前滑塊的index')
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //點擊切換，滑塊index賦值
  checkCurrent: function(e) {
    console.log('點擊切換')
    const that = this;
    console.log(e.target.dataset.current)
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },

  //監(jiān)聽滑動
  layoutScroll: function(e) {
    this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
    // console.log(this.data.scrollTop)
    // console.log(this.data.navFixed)

    /** 我這里寫了固定值 如果使用rpx 可用query可以動態(tài)獲取其他的高度 然后修改這里值 */
    /** 獲取方法參考文檔 */

    /** scrollTop 在模擬器上檢測不是太靈敏 可在真機上測試 基本上不會出現(xiàn)延遲問題 */
    var navtopHeight = 160;
    if (this.data.scrollTop <= -navtopHeight) {
      this.setData({
        navFixed: true
      })
    } else {
      this.setData({
        navFixed: false
      })
    }
  },
})

本篇分享就到這里了，如果你在這篇文章里發(fā)現(xiàn)了什么問題或者說有更好的建議，麻煩在評論區(qū)留下你的意見

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容