微信小程序蓝色各大快递选择页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
  <scroll-view class="express-list-view" scroll-y="true">
    <view wx:for="{{express_list}}" class="express-list-item" bindtap="bindItemTap" data-no="{{item.no}}" data-com="{{item.com}}">
      <text class=""express-list-item-name>{{item.com}}</text>
    </view>
  </scroll-view>
</view>

二、wxss样式文件代码如下：


.express-list-view{
  margin-top: 20rpx;
}

.express-list-item{
  padding: 20rpx;
  padding-left: 40rpx;
  border-bottom: solid 2rpx lightgray;
}

三、js页面代码如下：

// //index.js
// //获取应用实例
// var app = getApp()
// Page({
//   data: {
//     motto: 'Hello World',
//     userInfo: {}
//   },
//   //事件处理函数
//   bindViewTap: function() {
//     wx.navigateTo({
//       url: '../logs/logs'
//     })
//   },
//   onLoad: function () {
//     console.log('onLoad')
//     var that = this
//     //调用应用实例的方法获取全局数据
//     app.getUserInfo(function(userInfo){
//       //更新数据
//       that.setData({
//         userInfo:userInfo
//       })
//     })
//   }
// })

Page( {
  data: {
    express_list: [
      {
        'com': '顺丰',
        'no': 'sf'
      },
      {
        'com': '圆通',
        'no': 'yt'
      },
      {
        'com': '申通',
        'no': 'sto'
      },
      {
        'com': '韵达',
        'no': 'yd'
      },
      {
        'com': '天天',
        'no': 'tt'
      },
      {
        'com': 'EMS',
        'no': 'ems'
      },
      {
        'com': '中通',
        'no': 'zto'
      },
      {
        'com': '汇通',
        'no': 'hy'
      }
    ]
  },
  bindItemTap : function(item){
    wx.navigateTo({
      url : '../details/details?com='+item.currentTarget.dataset.com+'&no='+item.currentTarget.dataset.no
    });
  }
});

模板简介：该模板名称为【微信小程序蓝色各大快递选择页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。