微信小程序自定义顶部搜索栏，根据页面滚动自动显示隐藏
根据屏幕的滑动自动显示隐藏，具体代码：
1、js代码
Page({
/**
* 页面的初始数据
*/
data: {
show: false, // 自定义顶部状态显示与隐藏
barHeight: 20, // 顶部状态栏高度
navBarHeight: 66, // 顶部高度
},
// 页面滚动监听
onPageScroll(e) {
if (e.scrollTop > 60) {
this.setData({
show: true
})
} else {
this.setData({
show: false
})
}
},
// 搜索监听
searchClick() {
wx.showToast({
title: '点击了搜索监听',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
var that = this;
// 胶囊信息
var menu = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success(res) {
that.setData({
barHeight: res.statusBarHeight,
navBarHeight: menu.top + menu.height + 6
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
2、wxml代码
<view class="bar-box" style="height: {
{
navBarHeight}}px;">
<view wx:if="{
{show}}" class="level" style="margin-top: {
{
barHeight}}px;">
<view class="level bar">
<icon class="icon-small" type="search" size="20"></icon>
<input placeholder="输入关键字" class="input-text" disabled="true" bindtap="searchClick" />
</view>
</view>
<view class="bar-title" style="margin-top: {
{
barHeight}}px;" wx:else>滑动切换搜索框</view>
</view>
<!-- 搜索 -->
<view class="level search-box" style="padding-top: {
{
navBarHeight}}px;">
<view class="level col">
<icon type="search" size="20"></icon>
<input placeholder="输入关键字" class="input-text" disabled="true" bindtap="searchClick" />
</view>
</view>
<!-- 下面为方便测试，模拟写的高度，可删除 -->
<view style="height: 900px;"></view>
3、wxss代码
page {
background-color: #f1f1f1;
}
.level {
display: flex;
align-items: center;
}
/* 状态栏 */
.bar-box {
background-color: #66cccc;
position: fixed;
left: 0;
right: 0;
z-index: 999;
}
.bar-title {
padding-top: 3%;
text-align: center;
font-size: 34rpx;
color: white;
}
.bar {
width: 80%;
padding: 10rpx;
border-radius: 50rpx;
background-color: white;
margin-right: 30%;
margin-top: 1.5%;
margin-left: 20rpx;
}
/* 搜索 */
.search-box {
padding: 20rpx 0;
}
.col {
width: 100%;
padding: 15rpx 10rpx;
border-radius: 50rpx;
background-color: white;
margin: 20rpx;
box-shadow: 0 3rpx 3rpx 3rpx gray;
}
.input-text {
font-size: 30rpx;
padding-left: 10rpx;
}
4、json代码
{
"usingComponents": {
},
"navigationStyle": "custom"
}
更多功能，可前往下面链接：
更多详细功能