小程序原生写假数据渲染订单页+tab栏切换

最新推荐文章于 2024-07-05 08:14:15 发布

CV无敌小钢炮

最新推荐文章于 2024-07-05 08:14:15 发布

阅读量263

点赞数 1

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_51972740/article/details/112563401

版权

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用小程序原生技术编写订单页面，并实现假数据的渲染，同时涵盖tab栏切换的功能实现。通过html结构和js模块的详细讲解，帮助开发者理解相关操作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序原生写假数据渲染订单页+tab栏切换

html结构

在这里插入代码片
```<!--pages/index/index.wxml-->

<!-- tab栏 -->

<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" 
    data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

<!-- 订单 -->
<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
  <!-- 完成 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" ">
        <view class="orderListTitle">
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">预定时间: {{item.time}}</view>
            <text class="productPrice">当前状态：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合计：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 待付款 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" ">
        <view class="orderListTitle">
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">预定时间: {{item.time}}</view>
            <text class="productPrice">当前状态：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合计：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 取消 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" ">
        <view class="orderListTitle">
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">预定时间: {{item.time}}</view>
            <text class="productPrice">当前状态：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合计：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>

</swiper>

css样式

```css
/* pages/index/index.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模块

// pages/order/order.js
Page({
 
  /**
  * 页面的初始数据
  */
  data: {
  currtab: 0,
  swipertab: [{ name: '已完成', index: 0 }, 
  { name: '待付款', index: 1 }, 
  { name: '已取消', index: 2 },
  { name: '已完成', index: 3}],
  },
   
  /**
  * 生命周期函数--监听页面加载
  */
  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: "vsp月会员+超级套餐+++++++", 
  state: "交易成功", time: "2018-09-30 14:00-16:00", 
  status: "已结束", url: "../../image/icon_01.jpg", 
  money: "132" }, { name: "vsp月会员+超级套餐+++++++", 
  state: "交易成功", time: "2018-10-12 18:00-20:00", 
  status: "未开始", url: "../../image/icon_02.png", 
  money: "205" }]
  })
  },
   
  waitPayShow:function(){
  this.setData({
  waitPayOrder: [{ name: "vsp月会员+超级套餐+++++++", 
  state: "待付款", time: "2018-10-14 14:00-16:00", 
  status: "未开始", url: "../../image/icon_03.jpg", 
  money: "186" }],
  })
  },
   
  lostShow: function () {
  this.setData({
  lostOrder: [{ name: "vsp月会员+超级套餐+++++++", 
  state: "已取消", time: "2018-10-4 10:00-12:00", 
  status: "未开始", url: "../../image/icon_03.jpg", 
  money: "122" }],
  })
  },
   
   
  /**
  * 生命周期函数--监听页面显示
  */
  onShow: function () {
   
  },
   
  /**
  * 生命周期函数--监听页面隐藏
  */
  onHide: function () {
   
  },
   
  /**
  * 生命周期函数--监听页面卸载
  */
  onUnload: function () {
   
  },
   
  /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {
   
  },
   
  /**
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
   
  },
   
  /**
  * 用户点击右上角分享
  */
  onShareAppMessage: function () {
   
  }
  })