微信小程序佰客国际包裹转运快递首页设计制作开发教程

本文给大家带来的是微信小程序佰客国际包裹转运快递首页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="top-swiper">
<swiper style="height:{{swiperHeight}}px;width:100%;" indicator-dots="true" indicator-active-color="#f03650"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image class="img" style="height:{{swiperHeight}}px"  src="{{item}}"  mode="aspectFit" />
    </swiper-item>
  </block> 
</swiper>
</view>

<view class="function-tab" >
    <view class="wrap">
      <view class="list" bindtap="jump" data-jump="packagePredictTrans">
          <image class="func-img"  src="../../images/index/trans.png"  mode="aspectFit" />
          <view class="func-name">国际转运</view>
      </view>
      <view class="list" bindtap="jump" data-jump="arrivedPackageTrans">
          <image class="func-img"  src="../../images/index/pack.png"  mode="aspectFit" />
          <view class="func-name">我的包裹</view>
      </view>
      <view class="list" bindtap="jump" data-jump="volumeStart">
          <image class="func-img"  src="../../images/index/calc.png"  mode="aspectFit" />
          <view class="func-name">体积计算</view>
      </view>
      <view class="list" bindtap="jump" data-jump="mywaybillTrans">
          <image class="func-img"  src="../../images/index/waybill.png"  mode="aspectFit" />
          <view class="func-name">我的运单</view>
      </view>
    </view>
</view> 

<view class="model">
    <view class="toprow">
        <image  src="../../images/index/bkgj.png" mode="aspectFit" class="bk-img"></image>
    </view>
    <view class="row">
      <view class="imgWrap">
            <image style="height:{{height}}px" src="../../images/index/1.png" bindload="hubing" mode="aspectFit" class="model-img" bindtap="jump" data-jump="guide"></image>
      </view>
      <view class="imgWrap">
             <image style="height:{{height}}px" src="../../images/index/2.png" mode="aspectFit" bindload="hubing" class="model-img" bindtap="jump" data-jump="announcement"></image> 
      </view>
    </view>
      <view class="row">
      <view class="imgWrap">
            <image style="height:{{height}}px" src="../../images/index/3.png" mode="aspectFit" bindload="hubing" class="model-img" bindtap="jump" data-jump="mailLimit"></image>
      </view>
      <view class="imgWrap">
            <image style="height:{{height}}px" src="../../images/index/4.png" mode="aspectFit" bindload="hubing" class="model-img" bindtap="jump" data-jump="helpcentreMember"></image>
      </view>
    </view>
     <view class="row">
      <view class="imgWrap">
            <image style="height:{{height}}px" src="../../images/index/5.png" mode="aspectFit" bindload="hubing" class="model-img" bindtap="jump" data-jump="waybill"></image>
      </view>
      <view class="imgWrap">
            <image style="height:{{height}}px" src="../../images/index/6.png" mode="aspectFit" bindload="hubing" class="model-img" bindtap="jump" data-jump="expense"></image>
      </view>
    </view> 

</view>

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

/* index.wxss */

 .top-swiper{
  background-color:#f5f5f5;
padding:10px 15px;
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;


} 
.function-tab{
padding: 10px;
  background-color: #ffffff;

}
.img{
  width:100%;  
}
.list{
width:25%;
display:flex;
flex-flow:column wrap;
justify-content:center;
align-items:center;
}
.func-img{
  height:65px;
  width:65%;
}
.func-name{
  color:#4a4a4a;
}


.word{
color: #0077db;
}
.wrap{
  width:100%;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
display:flex;

}
.model{
padding:10px;
margin-top:10px;
display:flex;
flex-flow:column wrap;
justify-content:space-between;

}
.toprow{
width:100%;
display:flex;
justify-content:center;

}
.bk-img{
width:85%;
height:40px;

}
.row{
display:flex;
justify-content:space-between;

}
.imgWrap{
width:50%;

}
.model-img{
width:100%;
/* height: 90px; */


}

三、js页面代码如下：

var util=require('util.js');
Page({

  data: {

    swiperHeight:0,
    height:0,
    imgUrls: [
      "../../images/index/banner1.png",
      "../../images/index/banner2.png",
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },

  hubing:function(e){
    var height = util.ImageUtil(e);
    this.setData({
      height:height.height,
      swiperHeight: height.swiperHeight
    })
  },
  jump: function (e) {
    var url = e.currentTarget.dataset.jump;
    if (url == 'packagePredictTrans' || url == 'index' || url == 'member'){
          wx.switchTab({
            url: '../' + url + "/" + url,
          })
    }else{
    wx.navigateTo({
      url: '../' + url + "/" + url,
      complete: function () {
        console.log('success')
      }
    })
    }
  }

})

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