Search navigation bar by category, you need to achieve: Wallpaper classification can slide horizontally, click on the classification to search for the corresponding classified wallpaper pictures; When the page scrolls down to the Category Search Navigation Bar, it needs to be docked at the top of the page to show a ceiling effect. When the page scrolls up to the Category Search Navigation Bar, the Navigation Bar returns to its original position.

When it comes to horizontal sliding, it's natural to think of using the scroll-view component. Next, enter pages/index/index first. In the wxml file, write the layout code as follows:

<!-- Category Navigation Bar -->

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

  <view class="menu">

    <!-- Wallpaper Category List Traversal -->

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

      <!-- Category display, if categorized id Equals the currently selected wallpaper category id，Then show the selected state (add active Style) -->

      <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>

Next, enter pages/index/index. In the wxss file, write the style code as follows:

/* Category Navigation Bar Container Style */
.menubar {
  height: 82rpx;
  white-space: nowrap;/* Text will not wrap */
  display: flex;/* flex layout */
}
/* Category Navigation Bar Top Style */
.menubar.fixed {
  position: fixed;/* Fixed, docked positioning */
  top: 0px;/* Distance from Top */
  z-index: 100;/* Vertical hierarchy, the larger the number, the higher the front */
  border-top: 2rpx solid rgb(226, 226, 226);/* border-top-style */
}
/* Category Navigation Bar Menu Style */
.menu {
  width: 100%;
  height: 82rpx;
  line-height: 82rpx;/* Row Height */
}
/* Category Navigation Bar Menu Text Style */
.menu text {
  background-color: #fff;
  display: inline-block;/* Inline block element */
  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);/* border-bottom-style */
}
/* Category Navigation Bar Menu Selected Text Style */
.menu text.active {
  color: rgb(35, 158, 254);
}

In the code above, the key to a ceiling style (.fixed) is to use fixed positioning (position: fixed;), This enables a fixed docking display at the top of the page.

Finally, enter pages/index/index. In the JS file, write the following logic code:

Page({
  data: {
    /**
     * Is the Category Navigation Bar a "ceiling" effect
     */
    cat_is_fixed: false,
    /**
     * Wallpaper Category List
     */
    cate_list:[],
    /**
     * Currently selected wallpaper classification id, default: -1
     */
    curr_cate_id:-1
  },
  /**
   * Page Scroll Trigger Event
   * @param {*} e 
   */
  onPageScroll: function (e) {
    //Get whether the Category Navigation Bar is a "ceiling" effect
    let cat_is_fixed = this.data.cat_is_fixed;
    //If the page slide height is greater than or equal to 135 (the default height of the Classification Navigation Bar from the top, which is a lazy way to get measurements under the development simulator)
    if (e.scrollTop >= 135) {
      //Show "ceiling" effect
      !cat_is_fixed && this.setData({
        cat_is_fixed: true
      });
    } else {
      //Cancel the "ceiling" effect and restore the default display of the category navigation bar
      cat_is_fixed && this.setData({
        cat_is_fixed: false
      });
    }
  },
  /**
   * Categorize (click) search events
   * @param {*} e 
   */
  ev_cat_search: function (e) {
    //Get custom data for the current click on the Classification menu: Classification id
    let cate_id = e.currentTarget.dataset.id;
    //Update page data: currently selected wallpaper classification id
    this.setData({
      curr_cate_id: cate_id
    });
    //Request data interface to load wallpaper list
    this.default_load();
  }
});

In the code above, the current page scrolling height is obtained by onPageScroll page scrolling event, and the top-sucking effect is switched by comparing the height of the Category Search Navigation Bar (default) from the top of the page. Therefore, the ceiling effect is not complicated, it can be achieved by several lines of style and logic code.

Well, that's where this technical blog is written. I hope it will help you. High Definition Wallpaper Recommended WeChat Applet Source Now open source: based on the 2021 new version of WeChat applet API development, the project is compact, but the knowledge point is comprehensive, with detailed code comments, layout skills explanation, is very suitable for beginners to learn, and has advanced function implementation (sliding docking and ceiling, custom navigation bar and adapter, etc.) and the development of applet advertising space, the project provides test interface. Once downloaded, the experience runs; If the project feels good, please comment or forward it so that more people can see it. Thank you!

Project Open Source Links: https://gitee.com/hbcwxkj/os_bizhi_minapp

Project Video Course: A real-world case analysis of getting started with applet development: high definition wallpaper recommendation