推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序案例-快递查询
发布时间:2021-01-08
wxmlview class="container" input placeholder="输入快递单号" placeholder-class="placeColor" bindinput="getText"/ !--显示查得的快递信息-- scroll-view scroll-y="true" clas ...
wxml
[html] view plain copy
<view class="container">
<input placeholder="输入快递单号" placeholder-class="placeColor" bindinput="getText"/>
<!--显示查得的快递信息-->
<scroll-view scroll-y="true" class="scroll">
<view class="info" wx:for="{{dataInfo}}">
<view class="time">{{item.time}}</view>
<view class="context">{{item.context}}</view>
</view>
</scroll-view>
<view class="btngroup">
<button type="primary" hover-class="none" bindtap="search">查询</button>
<button type="primary" hover-class="none" bindtap="onBtnTap">{{expressChinese}}</button>
</view>
</view>
wxss
[html] view plain copy
/* index/index.wxss */
page{
background: #565656;
}
scroll-view{
border: 2rpx solid #f60;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 0;
}
input{
width: 550rpx;
padding: 10rpx 0;
text-align: center;
border: 2px solid #f60;
border-radius: 10rpx;
color: #fff;
}
.placeColor{
color: #fff;
}
.scroll{
height: 600rpx;
width: 100%;
margin-top: 20rpx;
}
.info{
padding: 30rpx;
}
.time{
color: #fff;
font-size: 14px;
}
.context{
color: #fff;
font-size: 16px;
margin-top: 10rpx;
}
.btngroup{
width: 100%;
margin-top: 100rpx;
}
.btngroup button{
width: 100%;
background: #f60;
color: #fff;
margin-top: 5rpx;
}
.btngroup .default{
background-color: #f60;
}
.btngroup .warn{
background-color: red;
}
js
[html] view plain copy
// index/index.js
Page({
data:{
expressChinese:'快递公司选择'
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var orderNum = this.data.orderNum;
},
search:function(){
this.getExpressInfo(this.data.expressEnglish,this.data.orderNum);
},
//传入快递公司、快递单号获取快递信息
getExpressInfo:function(param,orderNum){
console.log(param,orderNum);
