用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

微信小程序頂部搜索框(轉載)

Rolan 2020-7-29 00:57

原文地址:https://blog.csdn.net/weixin_44022446/article/details/86438015首先配置app.json文件配置相應路徑:編譯后生成相應文件夾、及文件夾內的4個文件,一個文件夾即一個頁面。在入圖片描述所有的js方法都是 ...

原文地址:https://blog.csdn.net/weixin_44022446/article/details/86438015

首先配置app.json文件

配置相應路徑:編譯后生成相應文件夾、及文件夾內的4個文件,一個文件夾即一個頁面。

在入圖片描述
所有的js方法都是用bindtap(點擊事件)調用的。例:搜索(點擊搜索調用a方法)
Input文本框的屬性:hidden="{{對應js里data中的內容}}。例:hidden="{{!inputShowed}}( input中的內容不顯示) hidden="{{inputShowed}}(顯示input中的內容)
示例1:
先做一個最簡單的文本框:在搜索框內輸入想要搜索的內容,點擊搜索就可以直接獲取你想要的內容。
在這里插入圖片描述

 

 

這是一個最簡單的搜索框,點擊搜索按鈕調用接口完成搜索?;A代碼如下:
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>
            </view>
            <!-- 搜索按鈕,調用搜索查詢方法 -->
            <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({
  /**
   * 頁面的初始數據,可以為空
   */
  data: {

  },
  // 查詢搜索的接口方法
  a: function () {
   
  }
})
復制代碼

示例2:
這是一個復雜點的搜索框樣式:初始搜索框無法編輯和輸入,點擊搜索框使搜索框進入可編輯狀態(在同一個頁面完成),在搜索框內填入要搜索的內容

 

 

 

 

點擊第一幅圖中的搜索框,搜索框樣式變成第二幅圖中的樣式,點擊取消后變回第一幅圖中的樣式?;A代碼如下:

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({
  // 頁面的初始數據
  data: {
    inputShowed: false,  //初始文本框不顯示內容
  },
  // 使文本框進入可編輯狀態
  showInput: function () {
    this.setData({
      inputShowed: true   //設置文本框可以輸入內容
    });
  },
  // 取消搜索
  hideInput: function () {
    this.setData({
      inputShowed: false
    });
  }
});
復制代碼

示例3:
這是一個復雜的搜索框:初始搜索框無法編輯和輸入(功能相當于按鈕),點擊搜索會跳轉到一個新頁面,在新頁面完成搜索操作。

 

 

 圖一為主頁面,圖二為搜索頁面(此頁面只是為了完成搜索操作),點擊主頁面的搜索框進入搜索頁面(搜索頁面可以顯示熱門搜索和歷史記錄)。
主頁面的基礎代碼如下:
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({
  /**
   * 頁面的初始數據
   */
  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="請輸入搜索內容"/>
                </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({
  /**
   * 頁面的初始數據
   */
  data: {
  
  },
  // 取消搜索,返回主頁面
  hideInput: function () {
wx.navigateTo({
//跳轉,返回主頁面路徑
      url: '../log1/log1'   
    })
  }
});
復制代碼
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 世人皆萌 來自: cnblogs
梦幻单人赚钱方法 幸运飞艇官网下载 十一选五中奖助手app下载 河内五分彩开奖视频 Bet365国际娱乐平台 江苏七位数机选 浙江11选5前三直遗漏 配资买卖股票 今日陕西十一选五推荐号 明日股市行情预测分析 好彩1计划