The WeChat applet customizes the top search bar and automatically displays and hides it according to page scrolling
Automatically display and hide according to the sliding of the screen, specific code:
1. js code
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 code
<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 code
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 code
{
"usingComponents": {
},
"navigationStyle": "custom"
}
For more functions, please go to the link below:
More detailed functions