微信小程序如何實現(xiàn)頂部搜索框

這篇文章主要介紹“微信小程序如何實現(xiàn)頂部搜索框”，在日常操作中，相信很多人在微信小程序如何實現(xiàn)頂部搜索框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序如何實現(xiàn)頂部搜索框”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

具體效果如下

這是一個最簡單的頂部搜索框，代碼如下

wxml

<view>
     <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="請輸入搜索內(nèi)容"/>
                </view>
            </view>
            <!-- 搜索按鈕,調(diào)用搜索查詢方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view>
        </view>
    </view>
</view>

wxss

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

js

Page({
  /**
   * 頁面的初始數(shù)據(jù),可以為空
   */
  data: {
 
  },
  // 查詢搜索的接口方法
  a: function () {
   
  }
})

那么最簡單的學會了  進階版的呢？  

這是一個復雜點的搜索框樣式：初始搜索框無法編輯和輸入，點擊搜索框使搜索框進入可編輯狀態(tài)（在同一個頁面完成），在搜索框內(nèi)填入要搜索的內(nèi)容

wxml

<view>
     <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 最初始時的搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="搜索"/>
                </view>
                <!-- 可編輯時的搜索框 -->
                <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                    <icon class="weui-icon-search" type="search" size="14"></icon>
                    <view class="weui-search-bar__text">搜索</view>
                </label>
            </view>
            <!-- 取消搜索 -->
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
        </view>
    </view>
</view>

wxss

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search {
  margin-right: 4px;
  font-size: inherit;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__text {
  display: inline-block;
  font-size: 16px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.weui-search-bar__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 3px;
  text-align: center;
  color: #9B9B9B;
  background: #FFFFFF;
  line-height: 28px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

js

Page({
  // 頁面的初始數(shù)據(jù)
  data: {
    inputShowed: false,  //初始文本框不顯示內(nèi)容
  },
  // 使文本框進入可編輯狀態(tài)
  showInput: function () {
    this.setData({
      inputShowed: true   //設置文本框可以輸入內(nèi)容
    });
  },
  // 取消搜索
  hideInput: function () {
    this.setData({
      inputShowed: false
    });
  }
});

進階版的也完成了，最后，我想到了京東的點擊搜索跳轉一個頁面，然后才可以編輯

主頁代碼如下

wxml

<view class='page_row' bindtap="suo">
    <view class="search">
      <view class="df search_arr">
        <icon class="searchcion" size='16' type='search'></icon>
        <input class="sousuo" disabled placeholder="搜索" bindtap='search'/>
      </view>
    </view>
</view>

wxss

.search{
  width: 98%;
}
.search_arr {
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  margin-left: 20rpx;
}
.search_arr input{
  margin-left: 60rpx;
  height: 60rpx;
  border-radius: 5px;
}
.sousuo {
  padding-left: 38%;
  width: 15%;
  line-height: 150%;
  text-align: center;
}
.page_row{
  display: flex;
  flex-direction: row
}
.searchcion {
  margin: 10rpx 10rpx 10rpx 10rpx;
  position: absolute;
  margin-left:38%;
  z-index: 2;
  width: 15px;
  height: 15px;
  text-align: center;
 }

js

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
 
  },
  // 跳轉到搜索頁面
  search: function () {
    wx.navigateTo({
      url: '../search/search'
    })
  }
})

搜索頁面基礎代碼如下：

wxml

<view>
     <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="請輸入搜索內(nèi)容"/>
                </view>
            </view>
            <!-- 取消搜索 -->
            <view class="weui-search-bar__cancel-btn" bindtap='hideInput'>取消</view>
        </view>
    </view>
</view>

wxss

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

js

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
  
  },
  // 取消搜索,返回主頁面
  hideInput: function () {
wx.navigateTo({
//跳轉，返回主頁面路徑
      url: '../log1/log1'   
    })
  }
});

到此，關于“微信小程序如何實現(xiàn)頂部搜索框”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>