這里先寫一下布局的代碼和js效果代碼，細(xì)節(jié)有空再補(bǔ)充

<!--index.wxml-->
<!--主頁(yè)模塊-->
<block wx:if="{{condition}}">
  <view class="content">
    <view class="current_box center">
      <view class="current_city center">
        <text>當(dāng)前城市：</text>
        <text>{{city}}</text>
      </view>
    </view>
    <view class="start_box text_center" bindtap="startEvent">
      <text class="start">起點(diǎn)</text>
      <text class="set_out">{{startData}}</text>
    </view>
    <view class="end_box text_center" bindtap="endEvent">
      <text>終點(diǎn)</text>
      <text>{{endData}}</text>
    </view>
    <view class="find_box center">
      <view class="find center" bindtap="findEvent">
        <text class="find_text">查詢</text>
      </view>
    </view>
  </view>
</block>
<!--請(qǐng)輸入起點(diǎn)模塊-->
<block wx:if="{{start}}">
  <view class="start_search_box">
    <view class="searches center">
      <view class="search text_center">
        <text class="search_text center">search</text>
        <input class="search_input center"  type="text" placeholder="請(qǐng)輸入起點(diǎn)" bindinput="startInputEvent"/>
        <text class="search_back center" bindtap="startBackEvent">back</text>
      </view>
    </view>
    <view class="location_box center">
      <view class="location">
        <text class="location_text align_center">我的位置：</text>
        <text class="location_city align_center">{{address}}</text>
      </view>
    </view>
  </view>
</block>

<!--請(qǐng)輸入起點(diǎn)-展示模塊-->
<block wx:if="{{isShow}}">
  <view class="start_show_box center">
    <view class="start_show_content">
      <view class="start_content align_center" wx:key="unique" bindtap="startItemEvent" wx:for="{{array}}" data-index="{{index}}">
        {{index}}:{{item.name}}
      </view>
    </view>
  </view>
</block>
<!--請(qǐng)輸入終點(diǎn)模塊-->
<block wx:if="{{end}}">
  <view class="end_search_box center">
    <view class="end_search text_center">
      <text class="search_text">search</text>
      <input type="text" placeholder="請(qǐng)輸入終點(diǎn)" bindinput="endInputEvent" />
      <text class="search_back" bindtap="endBackEvent">back</text>
    </view>
  </view>
</block>
<!--請(qǐng)輸入終點(diǎn)-展示模塊-->
<block wx:if="{{isTrue}}">
  <view class="end_show_box center">
   <view class="end_show_content">
    <view class="end_content align_center" bindtap="endItemEvent" wx:for="{{arrays}}" wx:key="unique" data-index="{{index}}">
     {{index}}:{{item.name}}
    </view>
   </view>
  </view>
</block>
<!--查詢路線模塊-->
<block wx:if="{{isInquiry}}">
  <view class="inquiry_box center">
  <view class="inquiry_content">
    <view class="inquiry_content_list center">
    {{startData}} -> {{endData}}
    </view>
  </view>
</view>
</block>
<!--測(cè)試模塊-->
<!--<view class="test">
  <text bindtap="testEvent">test</text>
</view>-->

js代碼：

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    city: '北京',
    startData: '從哪兒出發(fā)',
    endData: '要去哪兒',
    address: '同城街',
    condition: true,
    start: false,
    end: false,
    isShow: false,
    isTrue: false,
    isInquiry: false,
    city: "深圳市",
    inputData: "", //search頁(yè)面輸入框的數(shù)據(jù)
    array: [],
    arrays: []
  },
  /**
   *  函數(shù)名：findEvent
   *  功能：當(dāng)點(diǎn)擊主頁(yè)查詢按鈕時(shí)，
   *  如果起點(diǎn)和終點(diǎn)沒有數(shù)據(jù)的話,需要提示請(qǐng)輸入地點(diǎn)
   *  如果有起點(diǎn)和終點(diǎn)的話，需要隱藏主頁(yè)，顯示新的頁(yè)面(提供路線的頁(yè)面)
   */
  findEvent: function(){
    let _this = this;
    console.log(this.data.array.length);
    if( this.data.array.length > 0 && this.data.arrays.length > 0){
      _this.setData({
        condition: false,
        isInquiry: true,
      })
    }else{
      wx.showLoading({
        title: '請(qǐng)選擇地點(diǎn)',
      })
      setTimeout(function () {
        wx.hideLoading()
      }, 2000)
    }
  },
  /**
   *  函數(shù)名：startEvent
   *  功能：主頁(yè)面模塊隱藏
   *       起點(diǎn)頁(yè)面顯示
   */
  startEvent: function(){
    //console.log("aa");
    //console.log(this);
    this.setData({
      condition: false,
      start: true,

    })
  },
  /**
   *  函數(shù)名：endEvent
   *  功能： 主頁(yè)面模塊隱藏
   *        終點(diǎn)頁(yè)面顯示
   */
  endEvent: function(){
    //console.log("bb");
    this.setData({
      condition: !this.data.condition,
      end: !this.data.end
    })
  },
  /**
   *  函數(shù)名：startDeleteEvent
   *  功能：點(diǎn)擊起點(diǎn)輸入框中的back按鈕返回到主頁(yè)面
   *       
   */
  startBackEvent: function(){
    this.setData({
      condition: true,
      start: false,
      isShow: false
    })
  },
  /**
   *  函數(shù)名：endBackEvent
   *  功能：點(diǎn)擊終點(diǎn)輸入框中的back按鈕終返回主頁(yè)面
   * 
   */
  endBackEvent: function(){
    //console.log("endDeleteEvent");
    this.setData({
      condition: true,
      end: false
    })
  },
  /**
   *  函數(shù)名：startInputEvent
   *  功能： 在請(qǐng)輸入起點(diǎn)框中輸入內(nèi)容時(shí)，觸發(fā)此函數(shù)
   */
  startInputEvent: function(e){
    console.log("startInputEvent");
    var _this = this;
    let data = e.detail.value;
    //console.log("data",data);
    this.setData({
      isShow: true,
    })
    wx.request({
      //非真實(shí)接口，僅為示例
      url: "https://w.mmm.com/search2016/search/keywords",
      data: {
        keywords: data,
        city: 110000
      },
      method: 'GET',
      success: function(res){
        console.log(res.data.pois);
        //console.log(res.data.pois[0].city);
        _this.setData({
          array: res.data.pois
        })
      },
      fail: function(){
        console.log("請(qǐng)求失敗");
      }
    })
  },
  /**
   *  函數(shù)名：endInputEvent
   *  功能：在請(qǐng)輸入終點(diǎn)框中輸入內(nèi)容時(shí)觸發(fā)此函數(shù)
   */
  endInputEvent: function(e){
    console.log("endInputEvent");
    var _this = this;
    let data = e.detail.value;
    console.log(data);
    this.setData({
      isTrue: true,
    })
    wx.request({
      url: 'https://w.mmm.com/search2016/search/keywords',
      data: {
        keywords: data,
        city: 110000
      },
      method: 'GET',
      success: function(res){
        //console.log(res);
        _this.setData({
          arrays: res.data.pois
        })
      },
      fail: function(){
        console.log("請(qǐng)求失??！");
      }
    })
  },
  /*
   *  函數(shù)名：startItemEvent
   *  功能： 點(diǎn)擊渲染到的每一項(xiàng)，然后替換起點(diǎn)里面的值
   *  遇到的問題：
   *  1.怎么樣獲取每一項(xiàng)的值，然后改變起點(diǎn)的位置
   *  用 data-index = {{index}}
   *  2.如何才能獲取我點(diǎn)擊那一項(xiàng)對(duì)應(yīng)的值
   *  獲取i
   *  var i = e.target.dataset.index;
   *  不懂的話可以打出e看是什么東西
   *  
  */
  startItemEvent: function(e){
    console.log(e);
    var i = e.target.dataset.index;
    var itemList = this.data.array;
    console.log("itemList",itemList[i].name);
    var startItemData = itemList[i].name;
    this.setData({
      isShow: false,
      start: false,
      condition: true,
      startData: startItemData
    })
  },
  /**
   *  函數(shù)：endItemEvent
   *  功能：當(dāng)點(diǎn)擊渲染出來的每一項(xiàng)時(shí)，讓去哪兒改變數(shù)據(jù)
   */
  endItemEvent: function(e){
    console.log(e);
    var i = e.target.dataset.index;
    var itemList = this.data.arrays;
    console.log("itemList", itemList[i].name);
    var endItemData = itemList[i].name;
    this.setData({
      condition: true,
      end: false,
      isTrue: false,
      endData: endItemData
    })
  },
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  testEvent: function(){
    wx.navigateTo({
      url: "/pages/test/test"
    })
  },
  onLoad: function () {
    console.log('onLoad')
    //console.log(this);
    var that = this;
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

樣式代碼：

/**index.wxss**/
.content{
    width: 100%;
    height: 100%;
}
.current_box{
    width: 100%;
    height: 60rpx;
    border-bottom: 2rpx solid #ccc;
}
.start_box{
    width: 100%;
    height: 80rpx;
    border-bottom: 2rpx solid #ccc;
}
.start_show_box{
    width: 100%;
    height: auto;
    background: #f99;
}
.start_show_content{
    width: 90%;
    height: auto;
}
.start_content{
    width: 100%;
    height: 60rpx;
    background: yellow;
    margin: 10rpx 0;
}
.end_box{
    width: 100%;
    height: 80rpx;
    border-bottom: 2rpx solid #ccc;
}
.end_show_box{
    width: 100%;
    height: auto;
    background: #f99;
}
.end_show_content{
    width: 90%;
    height: auto;
}
.end_content{
    width: 100%;
    height: 60rpx;
    background: yellow;
    margin: 10rpx 0;
}
.find_box{
    width: 100%;
    height: 100rpx;
}
.find{
    width: 80%;
    height: 60rpx;
    background: #3cc51f;
}
.find_text{
    color: #fff;
}
.start_search_box{
    width: 100%;
    height: 180rpx;
    margin-bottom: 30rpx;
}
.searches{
    width: 100%;
    height: 120rpx;
    border: 2rpx solid #ccc;
}
.search{
    width: 90%;
    height: 60rpx;
    border: 2rpx solid #ccc;
    border-radius: 15px;
}
.search_text{
    background: #9f9;
}
.search_back{
    background: #9f9;
}
.location_box{
    width: 100%;
    height: 50rpx;
    border: 2rpx solid #ccc;
}
.location{
    width: 90%;
    height: 50rpx;
    display: flex;
}

.end_search_box{
    width: 100%;
    height: 120rpx;
    border-bottom: 2rpx solid #ccc;
}
.end_search{
    width: 90%;
    height: 60rpx;
    border-radius: 30rpx;
    border: 2rpx solid #ccc;
}
/*查詢模塊*/
.inquiry_box{
  width: 100%;
  height: auto;
  background: #f99;
}
.inquiry_content{
  width: 90%;
  height: auto;
}
.inquiry_content_list{
  width: 100%;
  height: 60rpx;
}

效果圖，可以查看微信小程序中的圖吧公交