微信小程序热门搜索功能实现

最新推荐文章于 2024-05-05 00:23:38 发布

原创

最新推荐文章于 2024-05-05 00:23:38 发布 · 1.8k 阅读

标签

#微信小程序 #css #前端

收录于

文章展示了如何在微信小程序中，通过点击搜索按钮弹出遮罩层，显示包含input搜索框和热门搜索列表的界面。当点击搜索框时，会自动弹出键盘，用户可以进行搜索操作。同时提供了相关的HTML结构和CSS样式代码。

微信小程序点击搜索按钮，弹出遮罩层，显示热门搜索和搜索功能界面

搜索框
遮罩，图层
input
热门搜索
页面元素自动换行

效果

请添加图片描述

点击搜索框，弹出第二个视图层，显示input搜索框，并自动弹出键盘。

代码

<view class="searchView" hidden="{
    
    {searchHide}}">
    <view class="searchContent">
        <view class="searchCell">
            <input class="inputbox" type="text" placeholder="搜索" placeholder-class="placeholder-class" focus="{
    
    {focus}}"/>
            <view class="cancel" bindtap="searchCancel">取消</view>
        </view>
        <view class="hotCell">
            <view class="hotCell-title">热门搜索</view>
            <view class="hotCell-text"