微信小程序之线路查询

线路查询界面布局：

主要代码：

<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.provincevar county=res.data.result.districtpage.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;
}}
}

微信小程序之线路查询相关推荐

微信小程序云开发查询数据库结果为空
微信小程序云开发查询数据库结果为空问题描述: 先上代码: getNotice : function(){var that = thisconst db = wx.cloud.database()db ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
微信小程序实现条件查询示例
微信小程序实现条件查询示例 index.js //index.js //获取应用实例 const app = getApp() const db = wx.cloud.database(); cons ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...
微信小程序制作天气查询系统
一.实验目标 1.掌握服务器域名配置和临时服务器部署: 2.掌握 wx.request 接口的用法. 二.实验步骤 (列出实验的关键步骤.代码解析.截图.) 和风天气API密钥申请 2.在微信小程序上 ...
微信小程序实现快递查询功能(附源码)
目录效果图项目结构快递查询API获取微信小程序后台配置页面代码 express页面代码 logistics页面代码注意问题(使用必看) 留言效果图项目结构快递查询API获取这里我使 ...
微信小程序之快递查询（完整版）
一.简介: 点击按钮查看快递信息.我也在网上找了很多快递查询的例子,但是它们都不是很详细.在代码上他们都没错,但是在配置上却缺少了一些东西,导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法 ...
微信小程序（快递查询）
阅读本博客需要对微信小程序有一个初步的理解可参照点我进行初步的了解效果图下面我们正式开始第一步查看目录结构并初步建立各个文件夹及在app.json中注册页面不注册无法显示我们这里只使用im ...
微信小程序入门--快递查询小程序的制作
最近在自学微信小程序开发,做了一个很垃圾的快递查询小demo,记录一下(=^ ^=) 开发前准备:微信开发者工具.快递查询的接口我用的快递查询接口是聚合数据的,地址如下https://www.juh ...

微信小程序之线路查询

微信小程序之线路查询相关推荐

最新文章

热门文章