欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序请输入运单号查询页面设计制作开发教程

    2018-08-14 10:13 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序请输入运单号查询页面设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--waybill.wxml-->
    <form bindsubmit="formSubmit">
    <view class="waybill">
      <view class="title">
        <view class="waybill_before">
        </view>
            <text class="word">运单查询</text>
      </view>
      <view class="body">
        <text class="label">运单号:</text>
        <input class="wayinput" placeholder="请输入运单号" name="number"/>
      </view>
        <view class="button_about">
        <button style="background-color:#0398e7;width:190px;" type="primary" class="trace" form-type="submit"  > 查询 </button>
        </view>
        <view class="hr"></view>
    
        <view class="table">
      <view class="tr bg-w">
        <view class="th">时间</view>
        <view class="th_place">地点和跟踪进度</view>
      </view>
        <view class="tr">
          <view class="td">2017-07-11 21:28:28</view>
          <view class="td_place" style="color:#bebeb3">邯郸|发件【邯郸市集散中心】,正准备发往【保定】</view>
        </view>
        <view class="tr">
          <view class="td">2017-07-11 21:28:28</view>
          <view class="td_place" style="color:#bebeb3">邯郸|发件【邯郸市集散中心】</view>
        </view>
        <view class="tr">
          <view class="td">2017-07-11 21:28:28</view>
          <view class="td_place" style="color:#bebeb3">邯郸|发件【邯郸市集散中心】</view>
        </view>
       <!-- <block wx:for="{{listData}}">
        <view class="tr">
          <view class="td">{{item.time}}</view>
          <view class="td_place">{{item.place}}</view>
        </view>
      </block>  -->
    </view>
    </view>
    </form>
    
    
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议