美文网首页
小程序自定义顶部导航栏

小程序自定义顶部导航栏

作者: 禾苗种树 | 来源:发表于2022-11-01 10:48 被阅读0次
    效果
    //xx.wxml
    <view class="y_custom_search y_common_fbox" style="height: {{navHeight}}px; >
        <view class="y_common_zbox y_common_flex" style="height: {{navHeight}}px;" >
            <view class="y_back" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;line-height: {{searchHeight}}px;">
                <image src="http://xxxxxx/fanhui_03.png" alt="" />
                <!-- <text>返回</text> -->
            </view>
            <view class="y_cssearch" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;">
              <text class=" iconfont icon-guanbi"></text>
              <input id="y_csearch" type="text"  
              confirm-type='search'placeholder="搜索本店商品" />
            </view>
           <view style="width: {{100% - searchWidth}}px"></view>//空标签给胶囊占位子
            
        </view>
    </view>
    
    
    //xx.wxss
    /*header  */
    .y_custom_search {position: fixed;top: 0;left: 0;width: 100%;}
    .y_custom_search .y_common_zbox{ justify-content: space-between;align-items: center;width: 100%;}
    .y_custom_search .y_back {width: 60rpx;text-align: center;}
    .y_custom_search .y_back>image,.y_custom_search .y_back>text{vertical-align: middle;}
    .y_custom_search .y_back image{width:17rpx;height: 31rpx;margin-right: 5rpx;}
    .y_custom_search .y_back text{font-size: 28rpx;color: #3269ff;}
    .y_custom_search .y_cssearch{padding-left: 20rpx;width:500rpx;height: 60rpx;border-radius:30rpx;background: #eeeeee;line-height:60rpx;font-size:26rpx ;color:#666 ;white-space: nowrap;}
    .y_custom_search .y_cssearch>input{width: 400rpx;height: 60rpx;border-radius:30rpx;border: none;outline: none;line-height:60rpx;font-size:26rpx ;color:#666 ;display: inline-block;vertical-align: middle;}
    .y_custom_search .iconfont{font-size: 28rpx;display: inline-block;margin-right: 12rpx;vertical-align: middle;}
    .y_custom_search .y_cssearch>input::placeholder{color: #999999 !important;}
    
    //xx.js
     onLoad(options) {
    
    
        this.setStatusBar();
      },
      //设置状态栏高度
      setStatusBar(){
        this.setData({menuButtonInfo:wx.getMenuButtonBoundingClientRect()});
        console.log(this.data.menuButtonInfo,'ssss');
        const { top, width, height, right } = this.data.menuButtonInfo;//?获取胶囊信息
        wx.getSystemInfo({//获取状态栏信息
          success: (result) => {
            const {statusBarHeight}= result;
            const margin = top - statusBarHeight;
            this.setData({
              navHeight:(height+statusBarHeight+(margin*2)),
              searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
              searchHeight: height,  // 与胶囊按钮同高
              searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
    
            })
          },
        })
      },
    
    
    • xx.json文件配置
    {
      "usingComponents": {},
      "navigationStyle": "custom"
    }
    

    相关文章

      网友评论

          本文标题:小程序自定义顶部导航栏

          本文链接:https://www.haomeiwen.com/subject/eqdgzrtx.html