小程序教程3

開發搜索頁和跳轉後的列表頁

小程序地址，點擊這裏

搜索頁

1. 搜索列表頁有幾個小功能要注意下，一個是在搜索框中有字的時候右邊的按鈕顯示的是搜索，若是裏面沒有字的話顯示的是取消，若是點擊取消的話返回首頁，若是點擊的是搜索的話須要進入搜索列表頁。
2. 點擊清除按鈕就將歷史搜索下的記錄給清除掉。點擊換一批案例說是將下面的標籤都給更換掉，可是這裏暫時不對這個功能進行處理。
3. 正常的頁面佈局在這裏就不贅述了，詳細的在github上有代碼，主要講一下須要注意的點。

4. 首先說下右邊按鈕的處理，功能是在搜索框有字的時候顯示搜索而且變成紅色按鈕，在搜索框沒有文字的時候顯示取消變成灰色按鈕，搜索時候點擊進入商品列表頁面，點擊取消按鈕的時候返回到京東首頁。

   <input placeholder="搜索京東商品" type="text" bindinput="keyinput"/>
       <icon type="search" size="16" color="#afafb1"></icon>
       <button size="mini" id="{{searchContent?'搜索':'取消'}}" bindtap="search" class="{{searchContent?'btn-search':''}}">{{searchContent?'搜索':'取消'}}</button>

   • 在js的data中定義一個searchContent變量，初始值爲undefined，而且給搜索框綁定一個keyinput方法，當輸入框的文字發生變化的時候會觸發，這個方法只處理一件事，就是吧輸入框中的值賦給剛剛定義的searchContent。

   • 同時使用小程序的模板語法動態的設置按鈕的id、類名和按鈕中的文字，而且給按鈕綁定了一個search的方法，這個方法主要處理跳轉和搜索。

     if(event.target.id === '搜索'){
     
             this.setData({
                 searchContent:undefined
             })
             wx.redirectTo({
                 url:"../goodsList/goodsList"
             })
         }else if(event.target.id === '取消'){
     
             this.setData({
                 searchContent:undefined
             })
             wx.navigateBack({
                 delta: 2
             })
         }

     • 經過方法的event對象中的target的id找到以前咱們設置的id，經過這個id來肯定當前咱們點擊的究竟是哪一個按鈕，分別進行路由處理，可是通須要給searchContent的值改變爲初始值undefined。
   • 由於搜索列表頁面和商品列表頁面是兩個單獨的頁面，因此在搜索列表選擇好以後須要讓商品列表知道而且發送請求(暫時未搭建服務器，因此暫時使用本地數據，後期會統一將數據挪到服務器，而後在將發送請求方面的知識)，如何讓兩個頁面通訊呢，我暫時選擇的是在app.js中的globalData中定義一個全局的變量，在搜索列表頁面中改變它，而後在商品列表頁面中獲取他而後把它當作請求的參數。

   • 搜索頁還有清空和換一批的功能，很簡單暫時就不處理了，接下來看商品列表頁的處理

商品列表頁

1. 剛剛已經經過全局的變量實現了搜索頁和商品列表也的模擬通訊，暫時不發送請求，自定義兩組數據來模擬吧。
2. 最上邊是一個搜索框，能夠實現搜索功能，定義一個變量來存儲搜索框的值，再定義一個發送請求的方法，當搜索的時候觸發事件還有就是頁面剛加載的時候經過全局變量searchKeyword來搜索商品，還有一個功能就是經過搜索跳轉到的詳情頁中的搜索框會直接顯示搜索的關鍵字。
   • 這裏直接就實現跳轉後搜索框中顯示剛纔的搜索關鍵字，只須要定義一個變量而且把全局關鍵字的值賦給它，而且綁定到輸入框的value就能夠了

   <input placeholder="搜索京東商品" value="{{searchKey}}" type="text" bindinput="keyinput"/>
   
       data:{
           searchKey:'筆記本電腦'
       }
   
       this.setData({
           searchKey:app.globalData.searchKeyword
       })

3. 接下來是四個篩選的選項
   • 這個正常來講應該是點擊以後根據條件發送請求，可是在這裏暫時不作，只是簡單實現點擊變色效果
   • 我暫時使用的方法是經過綁定data-id={{index}},在event.currentTarget.dataset.id下能夠找到，當兩個匹配的時候就能夠肯定點擊的當前按鈕從而改變樣式

   <view wx:for="{{filterData}}" data-id="{{index}}" bindtap="select" class="{{select == index ?'filter-select':''}}">
           <text>{{item}}</text>
       </view>
   
       select:function(event){
           this.setData({
               select:event.currentTarget.dataset.id
           })
       }

4. 下面是個列表顯示商品，佈局很少講，這裏就是佈局以後，使用wx:for把獲取到的數據顯示在下面就能夠了,有一個平時不是很經常使用的效果多行文字隱藏給出代碼以下：

   width: 200px;
       word-break: break-all;
       text-overflow: ellipsis;
       display: -webkit-box; /** 對象做爲伸縮盒子模型顯示 **/
       -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
       -webkit-line-clamp: 3; /** 顯示的行數 **/
       overflow: hidden;  /** 隱藏超出的內容 **/