博客

微信小程序自定义顶部搜索栏，根据页面滚动自动显示隐藏

根据屏幕的滑动自动显示隐藏，具体代码：

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"
}

更多功能，可前往下面链接：


更多详细功能