微信小程序之线路查询

 线路查询界面布局：

主要代码：

<!--index.wxml-->

<view class="container">  <!--城市定位-->  <view class="top">      <view class="top_left">    <text> {{city}}</text>    </view>  <!--搜索框-->  <view class="top_right">    <input  placeholder="search" type="text" value=""/>   </view><!--按钮切换-->  <view class="btn" bindtap="changeBtn">    <view class="{{currentIndex==0?'active':''}}" data-index="0">最近使用     </view>  <view class="{{currentIndex==1?'active':'active'}}" data-index="1">查询路线     </view>    <view class="{{currentIndex==2?'active':''}}" data-index="2">收藏     </view>  </view><view class="contain"><!--站点查询-->  <view class="from1">     <input bindchange="inputStart"  placeholder="> 起始站" placeholder-class="from1-text" />  </view>  <view class="image"> <image  catchtap="bindImg" animation="{{animation}}" src="../../images/switch1.png" >   </image></view>  <view class="from2">     <input bindchange="inputEnd" placeholder="> 终点站" placeholder-class="from2-text"/>  </view>  <!--查询按钮-->  <image catchtap="searchReault" src="../../images/search6.png"></image>  <!--扣费选择-->  <view class="switch1">    <text class="text">是否到站自动扣费?</text>    <switch checked bindchange="switchChange"/>  </view></view>    <!--显示界面-->    <view class="line"><block  wx:for="{{busline}}"  wx:key="{{index}}"><navigator class="list list-bg1" url="../busline/busline?id={{index}}"  wx:if="{{condition}}">  <text class="text1">乘车方案{{index+1}}：</text>  <text class="text2">{{item.vehicles}} <text class="text3">详细>></text></text>   </navigator>  </block>  </view>  </view></view>

/**index.wxss**/

.top {  float: left;  width: 100%;  height:90rpx;  background:linear-gradient(to bottom,rgba(51,190,44,1), rgba(51,190,44,0.6));  /*background:linear-gradient(rgba(140,224,178,0.9), rgba(140,224,178,0.6));*/}.top_left{  float: left;  width:25%;   margin-top:10rpx;  color: #fff;  }.top_left text{  color:#fff;  margin-left: 12%;  text-align:center;  font-weight: bolder;  font-size: 40rpx; /* text-shadow:0 0 0.2em rgba(0,0,0,.2),                -0 -0 0.2em rgba(0,0,0,.2);*/}.top_right{  height: 100%;  /*background:#66CC9A;*/  /*background:#5FAC4B;*/}/**搜索框**/.top_right input{     float:left;    width:58%;    margin-left:3%;    height:60rpx;    padding-left:32rpx;    border-radius:12px;    border:2px solid rgba(255,255,255,.3);    box-shadow: inset 0px 0px 6px rgba(255,255,255,.1);} .top_right text{  float: left;  margin-left:2%;}/*.search{     position: relative;} .search:before{    float: right;    margin-top: 10rpx;    margin-right:-8%;    content: ' ';     width:35rpx;     height:35rpx;     border:2px solid #fff;     border-radius:36rpx;     box-shadow: inset 1px 1px 10px rgba(0,0,0,.2);}.search:after {    float: right;   margin-right:-60rpx;    margin-top:20px;    content: ' ';     width:30rpx;     height:8rpx;     background: #fff;     border-radius: 8rpx 0 0 8rpx;     transform: rotate(45deg); } *//*切换按钮*/.btn{  width:100%;  display:-webkit-box;  display:-ms-flexbox;  display:flex;     -webkit-box-orient:horizontal;  -webkit-box-direction:normal;  -ms-flex-direction:row;  flex-direction:row;  font-size:40rpx;  -webkit-box-pack:center;  -ms-flex-pack:center;  justify-content:center;  background: #fff;  position:relative;}.btn,.btn:before{box-sizing:border-box}.btn:before{  content:'';  width:200%;  height:0;  position:absolute;  left:0;  bottom:0;  -webkit-transform:scale(.5);  transform:scale(.5);  -webkit-transform-origin:0 0;  transform-origin:0 0}.btn view{  width:40%;  height:3rem;  line-height:3rem;  text-align:center;  color:#666;  font-weight:500}.btn view.active{color:#33BE2C;position:relative}.btn view.active:after{  content:'';  width:200%;  height:0;  position:absolute;  left:0;  bottom:-.053333rem;  border-bottom:4px solid #33BE2C;  -webkit-transform:scale(.5);  transform:scale(.5);  -webkit-transform-origin:0 0;  transform-origin:0 0;  }.contain{  width: 100%;  margin-top:6px;  background: #fff;}/*站点查询*/.image{  margin-left: 2%;width:25%;height:30px;display: block;}.image>image{  margin-top:-18rpx;width:25px;height: 25px}.from1{  float:left;display: block;  margin-left:15%;width:55%;  padding-top:11px;  padding-bottom:6rpx;  border-bottom:1px solid #ccc;}.from2{  float:left;  padding-top:8rpx;display: block;  margin-left:15%;width:63%;  padding-bottom:18px;}.from1-text{  color:#B2B2B2;  font-size: 30rpx;  padding-bottom:4rpx;}.from2-text{  color:#B2B2B2;  font-size: 30rpx;}.contain>image{width:25px;height:25px;  margin-top: -2px;  margin-left: 5%;  padding-bottom: 16px;}/*扣费选择*/.switch1{  display: block;float:left;width:100%;background: #fff;  padding-top:10px;padding-bottom:5px;}.switch1 text{  float: left;  color:#424242;  margin-top:30rpx;  margin-left: 10px;  text-align:center;  font-size: 40rpx;}.switch1 switch{  margin-top:10rpx;  margin-bottom: 10rpx;  margin-left:30%;}/*查询结果*/.line{  width:94%;  margin:0 auto;  line-height: 100rpx;  margin-top:20%;  box-shadow:3px 3px 3px rgba(0,0,0,.2);   border-radius:12rpx; }.list text {  flex-grow:2;}.text1 {  width: 18%;  margin-left:3%;  text-align: center;  font-size:36rpx;  color:#424242;}.text2 {  margin-left:2%;  text-align: center;  width:82%;  font-size: 38rpx;  color:#2CAB26;}.list-bg1:nth-of-type(n){ background-color: #fff;}.text3{  float: right;  margin-right: 30rpx;  font-size:34rpx;}.nolist {  text-align: center;  width: 100%;  font-size: 28rpx;  padding-top: 40rpx;  color: #c82829;}

/**index.js**/

var tcity = require("../../utils/citys.js");var url="url";/*API地址：可参考极速数据*/var ak="appkey";Page({  data:{    busline:[],    city: "",    rotate: -180  },onLoad:function(options){      this.loadInfo();      console.log('onLoad...');  },   //获取经纬度信息loadInfo:function(){    var page=this    wx.getLocation({      type: 'wgs84',     success: function(res){        // success        var latitude=res.latitude //纬度       var longitude=res.longitude   //经度      page.loadCity(latitude,longitude)      },      fail: function() {        // fail      },      complete: function() {        // complete      }    })    },   //获取城市信息   loadCity:function(latitude,longitude){      var page =this      wx.request({      url: url+'geoconvert/coord2addr?lat='+latitude+'&lng='+longitude+'&type=baidu&appkey='+ak,      data: {},        header:{          'Content-Type':'application/json'        },        success: function(res){          // success          console.log(res);          var city=res.data.result.city;        var province= res.data.result.province        var county=res.data.result.district        page.setData({province:province});         page.setData({city:city});         page.setData({county:county});        },        fail: function() {          // fail        },        complete: function() {          // complete        }      })    },   //按钮切换  changeBtn: function(ev) {    this.setData({      currentIndex: ev.target.dataset.index    });  },  //键盘输入起始位置站台  inputStart:function(e){    var that=this;    that.setData({      start:e.detail.value    });  },   //键盘输入终点位置站台  inputEnd:function(e){    var that=this;    that.setData({      endaddr:e.detail.value    });  },//交换地址bindImg:function(){    var that=this;var animation = wx.createAnimation({      timingFunction: "ease",      duration: 400    })    this.animation = animation;    animation.rotateZ(this.data.rotate).step();        this.setData({      rotate: -1*this.data.rotate,      animation: animation.export(),    })  },//是否自动扣费switchChange: function (e){    console.log('switch1 发生 change 事件，携带值为', e.detail.value)  },//点击查询按钮触发  searchReault:function(){    var that = this;    //加载完成前，显示加载中的提示框  wx.showToast({    title:'正在努力加载中...',    icon:'loading',    duration:6000  });  //输入框没有输入的判断  if(that.data.start== '' || that.data.endaddr== '' ){    wx.hideToast();    return;  }  //发起请求，根据公交站点查询符合线路信息    wx.request({      url:url+'city='+that.data.city+'&start='+that.data.start+'&end='+that.data.endaddr+'&appkey='+ak+'&type=transit',      data: {},      success: function(res){        console.log(res.data)        var data=res.data;        that.setData({          busline:data.result,                  condition:true,        });     wx.setStorageSync('busline', data.result)           //数据加载完成后隐藏加载框        wx.hideToast();      },    })  }})

/**app.json**/

{  "pages":[    "pages/index/index",    "pages/state/state",   "pages/busline/busline",    "pages/mine/mine"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#33BE2C",    "navigationBarTitleText": "慧行公交",    "navigationBarTextStyle":"white"  }, "tabBar": {    "selectedColor": "#33BE2C",    "borderStyle": "white",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath":"/images/index1.png",      "selectedIconPath":"/images/index.png"      },      {       "pagePath": "pages/state/state",      "text": "状态",      "iconPath":"/images/state1.png",      "selectedIconPath":"/images/state.png"      },      {      "pagePath": "pages/mine/mine",      "text": "我的",      "iconPath":"/images/mine1.png",      "selectedIconPath":"/images/mine.png"      }          ]

/**app.wxss**/

page {  background-color: #EFEFEF;/*页面颜色*/  height: 100%;}/**app.wxss**/.container {  position: absolute;  height: 100%;  width: 100%;  min-height: 100%;  display: flex;  flex-direction: column;  justify-content: space-between;  padding: 0;  box-sizing: border-box;  background-color: #f8f8f8;} .citypickers{  position: fixed;  height: 100%;  width: 100%;  min-height: 100%;  background-color: red;}.citybody {  position: fixed;  bottom: 0px;}.cityheader {  position: absolute;  top:0px;  width: 100%;  z-index: 4;}.city-cancel {  float: left;  margin: 20rpx;  color: #818181;}.city-true {  float: right;  margin: 20rpx;  color: #2FB42E}.section .picker {  background-color: #fff;  border-bottom: 1px #d9d9d9 solid;  border-top: 1px #d9d9d9 solid;  padding: 20rpx;}  }}