mini-starter/mini-demo/pages/home/home.wxml

<view class="home">
  <!-- 顶部滚动图片 -->
  <view class="banner-container">
    <swiper class="banner-swiper" autoplay interval="5000" circular indicator-dots>
      <block wx:for="{{banners}}" wx:key="id">
        <swiper-item>
          <view class="banner-item" bindtap="onBannerTap" data-index="{{index}}">
            <image src="{{item.img}}" class="banner-img" mode="aspectFill"/>
            <view wx:if="{{item.title}}" class="banner-overlay">
              <view class="banner-title">{{item.title}}</view>
              <view wx:if="{{item.subtitle}}" class="banner-subtitle">{{item.subtitle}}</view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    
    <!-- 加载状态 -->
    <view wx:if="{{loadingBanners}}" class="banner-loading">
      <view class="loading-icon">⏳</view>
      <view class="loading-text">加载海报中...</view>
    </view>
  </view>

  <!-- 出行方式选择 -->
  <view class="service-tabs">
    <view wx:for="{{types}}" wx:key="type" 
          class="tab-item {{selectedType === item.type ? 'active' : ''}}" 
          bindtap="onTypeChange" 
          data-type="{{item.type}}">
      {{item.name}}
    </view>
  </view>

  <!-- 出行选择区域 -->
  <view class="booking-section">
    <view class="route-selector">
      <picker mode="multiSelector" 
              range="{{fromCityRange}}" 
              value="{{fromCityIndex}}" 
              bindcolumnchange="onFromCityColumnChange" 
              bindchange="onFromCityChange"
              class="route-picker">
        <view class="route-item">
          <view class="route-text">{{fromCityText || '出发地'}}</view>
        </view>
      </picker>
      
      <button class="swap-btn" bindtap="swapCity">
        <view class="swap-icon">⇄</view>
      </button>
      
      <picker mode="multiSelector" 
              range="{{toCityRange}}" 
              value="{{toCityIndex}}" 
              bindcolumnchange="onToCityColumnChange" 
              bindchange="onToCityChange"
              class="route-picker">
        <view class="route-item">
          <view class="route-text">{{toCityText || '目的地'}}</view>
        </view>
      </picker>
    </view>

    <!-- 日期选择 -->
    <picker mode="date" value="{{date}}" bindchange="onDateChange">
      <view class="date-picker">
        <text class="date-label">出发日期</text>
        <text class="date-value">{{date}}</text>
      </view>
    </picker>

    <!-- 查询按钮 -->
    <button class="search-btn" bindtap="searchSchedules">查询</button>
  </view>

  <!-- 热门路线 -->
  <view class="hot-routes">
    <view class="section-title">热门路线</view>
    
    <!-- 加载状态 -->
    <view wx:if="{{loadingHotRoutes}}" class="routes-loading">
      <view class="loading-icon">⏳</view>
      <view class="loading-text">加载热门路线中...</view>
    </view>
    
    <!-- 路线列表 -->
    <view wx:else class="routes-grid">
      <view wx:for="{{hotRoutes}}" wx:key="id" 
            class="route-card route-card-{{index + 1}}" 
            bindtap="selectRoute" 
            data-index="{{index}}">
        <image class="route-img" src="{{item.img}}" mode="aspectFill"/>
        <view class="route-content">
          <text class="route-name">{{item.name}}</text>
          <view wx:if="{{item.price}}" class="route-price">¥{{item.price}}</view>
          <view wx:if="{{item.duration}}" class="route-duration">{{item.duration}}</view>
          <view wx:if="{{item.tags}}" class="route-tags">
            <text wx:for="{{item.tags}}" wx:key="*this" wx:for-item="tag" class="route-tag">{{tag}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>