微信小程序自定义顶部(实现搜索栏)

红太狼 2022-11-26 06:53 824阅读 0赞

wxml

<view class="navbar custom-class" style='height:{
       {navHeight}}px;'>
      <view class="navbar-action-wrap navbar-action-group row item-center" style='top:{
       {navTop}}px;'>
          <image style="width: 17.5px; height: 20px; " src="https://ico.dongtiyan.com/tu-130.png" catchtap="goBack"></image>
      </view>
      <view class='navbar-title' style='top:{
       {navTop}}px'>
        <view class="search-input">
          <span class="search-con">
            <view class="search-name" bindtap="chooseValue" data-inputvalue="{
       {postname}}">{
       {postname}}</view>
            <view class="search-img" bindtap="chooseEmpty">
              <image src="https://ico.dongtiyan.com/tu-131.png"></image>
            </view>
          </span>
        </view>
      </view>
    </view>

wxss

.navbar {
      width: 100%;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      flex-shrink: 0;
      background: #FFFFFF;
    }
    
    .navbar-title {
      width: 100%;
      box-sizing: border-box;
      padding-left: 40px;
      padding-right: 120px;
      height: 33px;
      line-height: 33px;
      /* text-align: center; */
      /* position: absolute; */
      position: fixed;
      left: 0;
      z-index: 10;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display:flex;
    }
    
    .navbar-action-wrap {
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      /* position: absolute; */
      left: 10px;
      z-index: 11;
      line-height: 1;
      padding-top: 6px;
      padding-bottom: 4px;
      position: fixed;
    }
    
    .navbar-action-group {
      /* border: 1px solid #f0f0f0; */
      border-radius: 20px;
      overflow: hidden;
    }
    
    .navbar-action_item {
      padding: 3px 0;
      color: #333;
    }
    
    .navbar-action-group .navbar-action_item {
      border-right: 1px solid #f0f0f0;
      padding: 3px 14px;
    }
    
    .navbar-action-group .last {
      border-right: none;
    }
    
    .navbar-title-size {
      font-size: 10px;
      margin-right: 20rpx;
      align-self: center;
      margin: 0 auto;
    }
    
    .navbar-title-size.active {
      color:red;
      border-bottom: 2px solid red;
    }
    .scroll-box {
      position: absolute;
      height:100%; 
      /* margin-top:60rpx; */
    }
    /* nav E */
    /* input框 */
    .search-input {
      width: 100%;
      height: 28px;
      line-height: 28px;
      background: #f6f6f6;
      border-radius: 30rpx;
      margin-top: 2px;
      font-size: 25rpx;
    }
    .search-con {
      display: flex;
      align-items: center;
    }
    .search-con .search-name {
      background: white;
      border-top-left-radius: 30rpx;
      border-bottom-left-radius: 30rpx;
      margin-left: 5px;
      line-height: 24px;
      margin-top: 2px; 
      padding-left: 10px;
      padding-right: 5px;
      color: gray;
    }
    
    .search-con .search-img {
      height: 24px;
      background: white;
      display: flex;
      align-items: center;
      border-top-right-radius: 30rpx;
      border-bottom-right-radius: 30rpx;
      padding-right: 5px; 
      margin-top: 2px; 
    }
    .search-con .search-img image {
      width: 15px;
      height: 15px;
    }

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 自定义顶部导航
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop,
      },
      // 点击返回上级页面
      goBack: function() {
        let pages = getCurrentPages();   //获取小程序页面栈
        let beforePage = pages[pages.length - 2];  //获取上个页面的实例对象
        beforePage.setData({      //直接修改上个页面的数据（可通过这种方式直接传递参数）
          txt: '修改数据了'
        })
        beforePage.goUpdate();   //触发上个页面自定义的go_update方法
        wx.navigateBack({         //返回上一页  
          delta: 1
        })
      },
      /**
       * 获取顶部固定高度
       */
      attached: function () {
        this.setData({
          navHeight: App.globalData.navHeight,
          navTop: App.globalData.navTop,
        })
      },
      
    })

App.js全局

onLaunch: function () {
        var _this = this;
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
          success: res => {
            //导航高度
            let statusBarHeight = res.statusBarHeight,
              navTop = menuButtonObject.top,
              navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
            // console.log(statusBarHeight)
            // console.log(menuButtonObject.height)
            // console.log(menuButtonObject.top)
            // console.log(statusBarHeight)
            // console.log(navHeight)
            this.globalData.navHeight = navHeight;
            this.globalData.navTop = navTop;        //navTop
            this.globalData.windowHeight = res.windowHeight;
          },
          fail(err) {
            console.log(err);
          }
        })
      },

最后来张效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

之前有很多不是针对性的去实现,以后我会 针对效果去实现各种常见的效果,供大家参考

如果对你有帮助,请关注一下博主的小程序支持一下, 在此谢谢了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221124/0d3483ba7a9c48b3b162f544d3385a1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20221124/62d0a67908ae43cdb2a6fdf451929369.png