小程序--搜索栏--原生

最新推荐文章于 2022-11-16 17:05:53 发布

可可耐耐程序媛

最新推荐文章于 2022-11-16 17:05:53 发布

阅读量255

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/m0_46609010/article/details/109314357

版权

本文介绍了如何在小程序中创建并实现一个原生的搜索栏功能，包括页面的基本结构布局，使用CSS进行样式设计，以及JavaScript逻辑的实现细节。

摘要由CSDN通过智能技术生成

1、页面结构

<view class="search_top">
  <input placeholder="输入搜索内容" class="search_top_left" bindinput="getsearchval" value="{
    {searchval}}"></input>
  <view class="search_top_xian"></view>
  <view class="search_top_button" bindtap="gosearchresult">搜索</view>
</view>
<!-- 搜索记录 -->
<block wx:if="{
    {showRecord}}">
  <view class="search_clear" wx:if="{
    {recentSearch.length}}">
    <view class="search_clear_left">搜索记录</view>
    <image src="/images/clear.png" class="search_clear_right" bindtap="clearSearch"></image>
  </view>
  <view class="search_record" wx:if="{
    {recentSearch.length}}">
    <view class="search_record_one" wx:for="{
    {recentSearch}}" bindtap="clickval" data-val="{
    {item}}">{
  {item}}</view>
  </view>
</block>
<!-- 搜索结果 -->
<view class="search_result"  wx:for="{
    {list}}"  data-id="{
    {item.id}}" bindtap="godetail">
    <view class="search_one"  bindtap=