扒一扒小程序已付费商品页（订单页面）WeChatLightAppPage of paid merchandis

那些人就不要看了It is a better choice to pass the article.

如果阅读过程中，明显感觉到不适，就不要看了，因为你还没准备好。 If you feel uncomfortable reading it, don’t read it because you’re not ready.

事无纲则繁We must know what column we are going to write.

我们要做的是线上商城app的已购订单显示页面，附带实现购物车和弃购订单：（三个页面的代码是完全一样的）

切换栏 ，切换栏将用到标签；class主要用到swiper-lab;**swiper-tab-list{{currtab ==item.index?‘on’:“}}”data-current="{{item.index}}“bindtap=“tabSwitch”;current=”{{currtab}}"class=“swiper-box” duration=“300” style="height:{{deviceH-31}}px"bindchange=“tabChange”>**这些都是微信小程序开发区别于传统HTMl标签的部分。完成,完成页整体包含在中；用实现页面滚动;待付款 ，整体处在之下，属hot-bo类，scroll-y开启ture选项；页面固定数值初始数据 在data:{}内；currtab数值设置为0,currtab: 0,写成currentTab: 0,或者currentTab: “0”，都是可以的。页面更新 采用onload:function(options){ }wxss就是微信小程序中的css .swiper-tab的设置根据一般手机页面在.swiper-tab {}设置height:40px; line-height:40px;大小都不是明显过分的；至于background color 根据实际，display:flex;position:relative;z-index:2；以及flex-direction:row;这样设置是可以的；文本样式设置justify-content:center;align-items:center;border-bottom:1px solid black没有特殊要求这样设置不会难看；常规数值设置

wxss样式：

/*切换栏*/ .swiper-tab { height: 40px; line-height: 40px; background: #3B3B3B; color:#fff ; display: flex; position: relative; z-index: 2; flex-direction: row; justify-content: center; align-items: center; border-bottom:1px solid black; } .swiper-tab-list { margin: 0 30px; padding: 0 4px; font-size: 15px; } .on { border-bottom:2px solid #fff; color: #f5f5f5; } .navTopList { display: flex; width: 100%; height: 70rpx; background: #fff; border-bottom: 1rpx solid #BEBEBE ; margin-top:5px; } .navTopList .order-info { text-align: center; } .navTopList .order-info view { width: 56rpx; height: 56rpx; margin-left: 31rpx; } .navTopList .order-info text { font-size: 34rpx; } .navTopList .order-info text.active { color: #ff6662; } .navTopList .ywc,.navTopList .dfk,.navTopList .yqx { flex: 1; } /*订单列表*/ .orderDetails { background: #fff; border-bottom: 20rpx solid #f5f5f5; } .orderListTitle { height: 100rpx; line-height: 100rpx; border-bottom: 1rpx solid #BEBEBE; } .orderListTitle .userName { padding-right: 50rpx; margin-left:10px; } .orderListTitle .orderStatus { float: right; margin-right: 20rpx; color: #2f7b27; font-size: 34rpx; } .orderListDetails { display: flex; height: 200rpx; border-bottom: 1rpx solid #f3f3f3; } .orderListDetails .productImg { flex: 1; height:180rpx; width:120px; margin-top: 20rpx; margin-left: 20rpx; } .orderListDetails .productImg image { width: 100px; height: 90%; } .orderListDetails .productInfo { flex: 4; margin: 40rpx 10px 20px 30rpx; font-size:15px; } .orderListDetails .productInfo .productTitle { font-size:15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom:10px; } .productCount { height: 80rpx; line-height: 80rpx; border-bottom: 1rpx solid #f3f3f3; } .productCount>view { float: right; margin-right: 30rpx; }

js：主要是在data中给切换栏配置参数，和默认显示第几个栏；

// pages/order/order.js Page({ /** * 页面的初始数据 */ data: { currtab: 0, swipertab: [{ name: '已完成', index: 0 }, { name: '待付款', index: 1 }, { name: '已取消', index: 2 }], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 页面渲染完成 this.getDeviceInfo() this.orderShow() }, getDeviceInfo: function () { let that = this wx.getSystemInfo({ success: function (res) { that.setData({ deviceW: res.windowWidth, deviceH: res.windowHeight }) } }) }, /** * @Explain：选项卡点击切换 */ tabSwitch: function (e) { var that = this if (this.data.currtab === e.target.dataset.current) { return false } else { that.setData({ currtab: e.target.dataset.current }) } }, tabChange: function (e) { this.setData({ currtab: e.detail.current }) this.orderShow() }, orderShow: function () { let that = this switch (this.data.currtab) { case 0: that.alreadyShow() break case 1: that.waitPayShow() break case 2: that.lostShow() break } }, alreadyShow: function(){ this.setData({ alreadyOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已结束", url: "../../images/bad0.png", money: "132" }, { name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未开始", url: "../../images/bad3.jpg", money: "205" }] }) }, waitPayShow:function(){ this.setData({ waitPayOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未开始", url: "../../images/bad1.jpg", money: "186" }], }) }, lostShow: function () { this.setData({ lostOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未开始", url: "../../images/bad1.jpg", money: "122" }], }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

Have A Try: Ctrl/Command+Z