<!--pages/test/test.wxml-->
<view style="padding-bottom:30rpx;position:fixed;top:0;width:100%;background:#2ea7e0;">
?? ?<view class="wehx-top_input weui-flex">
?? ??? ?<!-- 搜索框 -->
?? ??? ?<view class="weui-flex__item">
?? ??? ??? ?<view class="wehx-search__form">
?? ??? ??? ??? ?<view class="wehx-search__box">
?? ??? ??? ??? ??? ?<icon class="weui-icon-search_in-box" type="search" size="17" color="#0C98C5"></icon>
?? ??? ??? ??? ??? ?<input type="text" class="wehx-search__input" placeholder-class="wehx-input_placeholder" placeholder="关键字搜索,空格隔开" confirm-type="search" bindconfirm="search" value="{{search}}" />
?? ??? ??? ??? ??? ?<view class="weui-icon-clear" wx:if="{{search}}" bindtap="clearSearch">
?? ??? ??? ??? ??? ??? ?<icon type="clear" size="14" color="#2ea7e0"></icon>
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ?</view>
?? ??? ??? ?</view>
?? ??? ?</view>
?? ??? ?<view bindtap='toSend' style="display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 20rpx;color:#ffffff;">
?? ??? ??? ?<text class="iconfont icon-fabu-copy" style="font-size:40rpx;line-height:40rpx;"></text>
?? ??? ??? ?<view style="color:#ffffff;font-size:20rpx;padding-top:6rpx;">发单</view>
?? ??? ?</view>
?? ?</view>
</view>
<!-- 用于吸顶后 占位用的 -->
<view style="height:92rpx;width:100%;"></view>
<view style="width: 90%; height: 300rpx; background: red; margin: 30rpx auto;"></view>
<view class="navbar-wrap">
?? ?<view class="column {{isFixedTop?'fixed':''}}" id="navbar">
?? ??? ?<view class="block active">新品推荐</view>
?? ??? ?<view class="block">限时优惠</view>
?? ??? ?<view class="block">火爆热搜</view>
?? ??? ?<view class="block">猜你喜欢</view>
?? ?</view>
</view>
<block wx:for="{{20}}" wx:key="list">
?? ?<view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view>
</block>

/* pages/test/test.wxss */
view,
text {
? box-sizing: border-box;
? -moz-box-sizing: border-box;
? -webkit-box-sizing: border-box;
}
 
.navbar-wrap {
? width: 100%;
}
 
.navbar-wrap .column {
? width: 100%;
? height: 82rpx;
? display: flex;
? flex-direction: row;
? align-items: center;
? justify-content: space-around;
? background: #fff;
? border-bottom: solid 1px #eee;
? /* top: 0; */
? left: 0;
? z-index: 100;
}
 
.navbar-wrap .column.fixed {
? position: fixed;
? top: 92rpx;
}
 
/* 以下的代码不重要 */
.navbar-wrap .column .block {
? width: 25%;
? height: 80rpx;
? line-height: 80rpx;
? text-align: center;
? font-size: 30rpx;
? color: #333;
? letter-spacing: 1px;
? position: relative;
}
 
.navbar-wrap .column .block::after {
? content: "";
? width: 60%;
? height: 3px;
? border-radius: 2px;
? position: absolute;
? bottom: 0;
? left: 50%;
? transform: translateX(-50%);
? background: transparent;
}
 
.navbar-wrap .column .block.active {
? color: #1490ce;
? font-weight: bold;
}
 
.navbar-wrap .column .block.active::after {
? background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);
}
 
/* 顶部栏目布局 */
.wehx-search__form {
? overflow: hidden;
? background: #fff;
? border-radius: 30rpx;
}
 
.wehx-top_input {
? height: 62rpx;
? padding-left: 20rpx;
? background: #2ea7e0;
}
 
.wehx-search__box {
? position: relative;
? padding-left: 68rpx;
}
 
.wehx-search__input {
? height: 62rpx;
? font-size: 28rpx;
? border-radius: 32.5rpx;
? margin-right: 50px;
}

Page({
? data: {
? ? navbarInitTop: 0, //导航栏初始化距顶部的距离
? ? isFixedTop: false, //是否固定顶部
? },
? /**
? ?* 生命周期函数--监听页面加载
? ?*/
? onLoad: function (options) {
 
? },
? /**
? ?* 生命周期函数--监听页面显示
? ?*/
? onShow: function () {
? ? var that = this;
? ? if (that.data.navbarInitTop == 0) {
? ? ? console.log(that.data.navbarInitTop)
? ? ? //获取节点距离顶部的距离
? ? ? wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {
? ? ? ? if (rect && rect.top > 0) {
? ? ? ? ? console.log(rect.top - 92)
? ? ? ? ? //92是页面搜索框一栏整体的高度 ?若无搜索栏一项时可以不加此项目
? ? ? ? ? var navbarInitTop = parseInt(rect.top - 92);
? ? ? ? ? that.setData({
? ? ? ? ? ? navbarInitTop: navbarInitTop
? ? ? ? ? });
? ? ? ? }
? ? ? }).exec();
? ? }
? },
? /**
? ?* 监听页面滑动事件
? ?*/
? onPageScroll: function (e) {
? ? var that = this;
? ? var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
? ? // console.log(e.scrollTop) //滚动149rpx ?//滚动条距离顶部高度
? ? //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
? ? var isSatisfy = scrollTop >= (that.data.navbarInitTop) ? true : false;
? ? //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
? ? if (that.data.isFixedTop === isSatisfy) {
? ? ? return false;
? ? }
? ? that.setData({
? ? ? isFixedTop: isSatisfy
? ? });
? }
})

{
? "navigationBarTitleText": "测试",
? "usingComponents": {}
}