本文给大家带来的是微信小程序商品物流信息详情页面样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/member/orderTrace/orderTrace.wxml-->
<view class="container greybg">
<view class="m-delivery">
<view class="tabNav">
<view class="item active">包裹1</view>
<view class="item ">包裹2</view>
</view>
<view class="tabCon">
<view class="">
<view class="deliveryInfo">
<view class="icon-express"></view>
<view class="infoWarp">
<view class="d1">
<text class="s1">物流公司：</text>
</view>
<view class="d1">
<text class="s1">物流单号：</text>
</view>
</view>
</view>
<view class="deliveryDetail">
<view class="item active">
<i class="icon icon-dot ion-ios-location-outline"></i>
<view class="detail">
<view class="desc">物流信息查询出现异常</view>
<view class="time">2017/10/11 10:00:03</view>
</view>
</view>
<view class="item ">
<i class="icon icon-dot ion-ios-location-outline"></i>
<view class="detail">
<view class="desc">您的包裹已出库</view>
<view class="time">2016-04-07 15:32:58</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
|
二、js页面代码如下：
// pages/member/orderTrace/orderTrace.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
