微信小程序-订单页面

最新推荐文章于 2025-02-18 22:45:00 发布

chibimarukochan

最新推荐文章于 2025-02-18 22:45:00 发布

阅读量4w

点赞数 23

分类专栏：微信小程序

本文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/82887542

版权

说明：头部有一个三种预约状态的切换

wxml页面：

<!-- 切换栏 -->
<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

最低0.47元/天解锁文章