公交查询小程序程序

index.wxml

<!--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>

index.js

// 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"
    })
  }
})

index.wxss

/* 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;
}

来源：https://blog.csdn.net/boysky0015/article/details/73476753