效果圖和微信小程式圖吧公交中的一樣，只是樣式不一樣罷了，感興趣的可以用自己的手機檢視。
效果圖如下:
這是搜尋框，主要目的用於搜尋

這是搜尋到的資料，進行渲染

這是渲染路線的詳情頁，線路查詢和返回路線可以左右切換，下面對應的渲染資料即可

還是和之前一樣，主要分為三個模組，結構、樣式、行為。
結構程式碼如下：

<!--pages/route/route.wxml-->
<!--請輸入公交路線模組-->
<block wx:if = "{{isSearch}}">
  <view class="route_search_box center"
 
>
  <view class="search_box text_center">
    <text class="text_search center">search</text>
    <input class="text_input center" bindinput="searchInputEvent" type="text" placeholder="請輸入公交線路"/>
    <text class="text_back center">back</text>
  </view>
  </view
 
>
</block>
<!--請輸入公交路線內容-顯示模組-->
<block wx:if = "{{isList}}">
  <view class="search_content_box center">
  <view class="content_list">
    <view class="content_item align_center" bindtap="itemEvent" wx:for="{{searchArray}}" wx:key="unique" data-index="{{index}}">
 

    {{index}}:{{item.name}}
    </view>
  </view>
  </view>
</block>
<!--當點選搜尋到的公交線路時，跳轉到顯示公交路線模組-->
<block wx:if="{{isDetail}}">
  <view class="route_show_box">
    <view class="route_show_content center">
      <view class="route_name align_center">
        {{itemData}}:{{itemData}}
      </view>      
    </view>
    <view class="route_time center">
      <text class="text_time align_center">運營時間</text>
    </view>
    <view class="route_detail_box center">
      <view class="route_detail">
        <view class="detail_left center" style="background:{{back1}};" bindtap="routeFindEvent">線路查詢</view>
        <view class="detail_right center" style="background:{{back2}};" bindtap="routeBackEvent">返回路線</view>
      </view>
    </view>
  </view>
</block>

樣式程式碼如下：

/* pages/route/route.wxss */
/*搜尋框模組*/
.route_search_box{
  width: 100%;
  height: 120rpx;
}
.search_box{
  width: 90%;
  height: 80rpx;
  border-radius: 20rpx;
  border: 2rpx solid #ccc;
}
.text_search{
  background: #9f9;
}
.text_input{
  height: 80rpx;
}
.text_back{
  background: #9f9;
}
/*搜尋框搜尋內容模組*/
.search_content_box{
  width: 100%;
  height: auto;
  background: #f99;
}
.content_list{
  width: 90%;
  height: auto;
}
.content_item{
  width: 100%;
  height: 60rpx;
  margin: 10rpx 0;
  background: #9ff;
}
/*路線詳情頁面*/
.route_show_box{
  width: 100%;
  height: auto;
}
.route_show_content{
  width: 100%;
  height: 60rpx;
}
.route_name{
  width: 90%;
  height: 60rpx;
  border-bottom: 2rpx solid #ccc;
}
.route_time{
  width: 100%;
  height: 80rpx;
  background: #f4f4f4;
  border-bottom: 2rpx solid #ccc;
}
.text_time{
  width: 90%;
  height: 100%;
}
.route_detail_box{
  width: 100%;
  height: 80rpx;
}
.route_detail{
  width: 90%;
  height: 40rpx;
  display: flex;
  border: 5rpx solid #9f9;
  border-radius: 20rpx;
}
.detail_left{
  flex: 1;
  height: 40rpx;
  border-radius: 20rpx 0 0 20rpx;
}
.detail_right{
  flex: 1;
  height: 40rpx;
  border-radius: 0 20rpx 20rpx 0;
}

行為程式碼：

// pages/route/route.js
Page({
  data:{
    isSearch: true,
    isList: false,
    isDetail: false,
    itemData: "",
    back1: "red",
    back2: "",
    searchArray: []
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  },
  /**
   *  函式名：searchEvent
   *  功能：擋在請輸入路線輸入框中輸入內容時，觸發此事件
   */
  searchInputEvent: function(e){
    //console.log("searchEvent");
    var data = e.detail.value;
    var _this = this;
    this.setData({
      isList: true
    })
    wx.request({
      //非真實介面
      url: 'http://w.mmmm.com/search2016/search/wods',
      data:{
        keywords: data,
        city: 110000
      },
      method: "GET",
      success: function(res){
        //console.log("res",res);
        _this.setData({
          searchArray: res.data.pois
        })
      },
      fail: function(){
        console.log("請求失敗！");
      }
    })
  },
  /**
   *  函式名：itemEvent
   *  功能：當在搜尋框中輸入內容時，顯示搜尋到的內容模組
   */
  itemEvent: function(e){
    //console.log(e);
    let i = e.target.dataset.index;
    let searchItemData = this.data.searchArray;
    //console.log(searchItemData);
    let itemData = searchItemData[i].name;
    //console.log(itemData);
    //console.log(i);
    this.setData({
      isSearch: false,
      isList: false,
      isDetail: true,
      itemData: itemData
    })
  },
  /**
   *  函式名：routeFindEvent
   *  功能： 實現點選切換
   */
  routeFindEvent: function(){
    console.log("aa");
    this.setData({
      back1: "red",
      back2: ""
    })
  },
  /**
   *  函式名：routeBackEvent
   *  功能：實現點選切換
   */
  routeBackEvent: function () {
    this.setData({
      back1: "",
      back2: "red"
    })
  }
})