微信小程序快递流程直通车导航页面设计制作开发教程

本文给大家带来的是微信小程序快递流程直通车导航页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<!-- <view class="container">
 <view class="top_pic">
 <image src="../../images/row.png" mode="aspectFit"></image>
 </view> 

  <view class="guide_wrap">
      <view class="detail">
         <image src="../../images/row_1.png" mode="aspectFit"></image>
      </view>
      <view class="detail">
         <image src="../../images/row_2.png" mode="aspectFit"></image>
      </view>
     
  </view>
  <view class="guide_wrap" style="margin-top:-70px;">
      <view class="detail">
         <image src="../../images/row_3.png" mode="aspectFit" style="margin-"></image>
      </view>
      <view class="detail">
         <image src="../../images/row_4.png" mode="aspectFit"></image>
      </view>
     
  </view>

</view> -->

<view class="guide">
  <view class="top">
      <image style="height:{{topheight}}px" class="img" src="../../images/guide/row.png" mode="aspectFit" bindload="hubing"></image>
  </view>
  <view class="four">
      <view class="row" style="margin-top:{{gap}}px">
          <view class="single">
              <image style="height:{{singleheight}}px" class="img" src="../../images/guide/row_1.png" mode="aspectFit" bindtap="jump" data-jump="0" ></image>        
          </view>
          <view class="single">
              <image  style="height:{{singleheight}}px" class="img" src="../../images/guide/row_2.png" mode="aspectFit" bindtap="jump" data-jump="1"></image>    
          </view>
      </view>
      <view class="row" style="margin-top:{{gap}}px">
          <view class="single">
              <image style="height:{{singleheight}}px" class="img" src="../../images/guide/row_3.png" mode="aspectFit" bindtap="jump" data-jump="2" ></image>        
          </view>
          <view class="single">
              <image  style="height:{{singleheight}}px" class="img" src="../../images/guide/row_4.png" mode="aspectFit" bindtap="jump" data-jump="3"></image>    
          </view>
      </view>
      
  </view>
</view>

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

/**index.wxss**/

/* .top_pic{
  margin: -60rpx;
  width: 95%;
}
image{
    width: 100%;
    margin: 0 0 ;

}

.guide_wrap{
  margin-top:-40px;
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin-bottom: 0;
}
.detail{
  margin-top: -10px;
  padding: 0 0;
  width:48%;
  margin: 0 1%; 

} */

.guide{
  padding:15px;
display:flex;
flex-flow:column wrap;

}
.top{
  width:100%;

}
.four{
  width:100%;
display:flex;
flex-flow:column wrap;

}
.row{
  width:100%;
display:flex;
flex-flow:row wrap;
justify-content:space-between;

}
.single{
  width: 48.5%;

}
.img{
  width: 100%;

}

三、js页面代码如下：

//index.js
//获取应用实例
const app = getApp()
var util = require('util.js');
Page({
  data: {
    gap:10,
    topheight:0,
    singleheight:0,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  tapme:function(){
    console.log('taped');
    this.setData({
      condition:true,
    })
  },
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  hubing: function () {
    var height = util.ImageUtil();
    console.log(height)
    this.setData({
      topheight: height.topheight,
      singleheight: height.singleheight,
      gap:height.gap
    })
  },
  jump: function (e) {
    var id = e.currentTarget.dataset.jump;
    wx.redirectTo({
      url: '../../pages/guideGif/guideGif?id='+id,
    })
  }
})

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