壁纸小程序分类搜索导航栏及吸顶效果功能实现详细讲解！附壁纸小程序源码下载

分类搜索导航栏，需要实现的是：壁纸分类可以横向滑动，点击分类搜索对应分类的壁纸图片；当页面向下滚动到分类搜索导航栏时，此导航栏需停靠在页面顶部，显示吸顶效果，而当页面向上滚动到分类搜索导航栏时，此导航栏恢复原位。

提到横向滑动，很自然想到用scroll-view组件实现。下面首先进入pages/index/index.wxml文件中，编写布局代码如下：

<!-- 分类导航栏 -->

<scroll-view scroll-x="{{true}}" class="menubar {{cat_is_fixed?'fixed':''}}">

  <view class="menu">

    <!-- 遍历壁纸分类列表 -->

    <block wx:for="{{cate_list}}" wx:key="id">

      <!-- 分类显示，如果分类id等于当前当前选中壁纸分类id，则显示选中状态（添加active样式） -->

      <text class="{{item.id==curr_cate_id?'active':''}}" bindtap="ev_cat_search" data-id="{{item.id}}" data-index="{{index}}">{{item.name}}</text>

    </block>

  </view>

</scroll-view>

接下来，进入pages/index/index.wxss文件中，编写样式代码如下：

/* 分类导航栏容器样式 */
.menubar {
  height: 82rpx;
  white-space: nowrap;/* 文本不会换行 */
  display: flex;/* flex布局 */
}
/* 分类导航栏吸顶样式 */
.menubar.fixed {
  position: fixed;/* 固定、停靠定位 */
  top: 0px;/* 距离顶部位置 */
  z-index: 100;/* 垂直方向层级，数字越大越靠前 */
  border-top: 2rpx solid rgb(226, 226, 226);/* 上边框样式 */
}
/* 分类导航栏菜单样式 */
.menu {
  width: 100%;
  height: 82rpx;
  line-height: 82rpx;/* 行高 */
}
/* 分类导航栏菜单文本样式 */
.menu text {
  background-color: #fff;
  display: inline-block;/* 行内块元素 */
  width: 138rpx;
  font-size: 28rrpx;
  color: rgb(153, 153, 153);
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 2rpx solid rgb(226, 226, 226);/* 下边框样式 */
}
/* 分类导航栏菜单选中文本样式 */
.menu text.active {
  color: rgb(35, 158, 254);
}

在上面代码中，吸顶样式（.fixed）的关键在于：使用fixed定位（position: fixed;），以此实现固定停靠在页面顶部显示。

最后，进入pages/index/index.js文件中，编写相关的逻辑代码如下：

Page({
  data: {
    /**
     * 分类导航栏是否是“吸顶”效果
     */
    cat_is_fixed: false,
    /**
     * 壁纸分类列表
     */
    cate_list:[],
    /**
     * 当前选中壁纸分类id，默认：-1
     */
    curr_cate_id:-1
  },
  /**
   * 页面滚动触发事件
   * @param {*} e 
   */
  onPageScroll: function (e) {
    //获取分类导航栏是否是“吸顶”效果
    let cat_is_fixed = this.data.cat_is_fixed;
    //如果页面滑动高度大于等于135（分类导航栏默认距离顶部的高度，此高度值是在开发模拟器下获取测算的偷懒做法）
    if (e.scrollTop >= 135) {
      //显示“吸顶”效果
      !cat_is_fixed && this.setData({
        cat_is_fixed: true
      });
    } else {
      //取消“吸顶”效果，还原分类导航栏默认显示
      cat_is_fixed && this.setData({
        cat_is_fixed: false
      });
    }
  },
  /**
   * 分类（点击）搜索事件
   * @param {*} e 
   */
  ev_cat_search: function (e) {
    //获取当前点击分类菜单的自定义数据：分类id
    let cate_id = e.currentTarget.dataset.id;
    //更新页面数据：当前选中壁纸分类id
    this.setData({
      curr_cate_id: cate_id
    });
    //请求数据接口，加载壁纸列表
    this.default_load();
  }
});

在上面代码中，通过onPageScroll页面滚动事件，获取当前页面滚动高度，跟分类搜索导航栏（默认）距离页面顶部的高度做比较，进行吸顶效果的切换效果。所以，吸顶效果实现并不复杂，通过几行样式和逻辑代码即可搞定。

好了，这篇技术博客就写到这里，希望对你能有所帮助。高清壁纸推荐微信小程序源码现已开源：基于2021年新版微信小程序API开发，项目小巧，但知识点很全面，有详细的代码注释、布局技巧讲解，非常适合初学者学习，并有高级功能实现（滑动停靠及吸顶、自定义导航栏及适配等）及小程序广告位的开发，项目提供有测试接口，下载后即可运行体验；如果感觉项目不错，请点赞或转发，让更多的人能看到，谢谢！

项目开源链接：https://gitee.com/hbcwxkj/os_bizhi_minapp

项目视频课程：小程序开发入门之实战案例解析：高清壁纸推荐