mini_read_space_front/pages/video/video.wxml

<!--pages/video/video.wxml-->
<view class="container">
  <!-- 顶部导航栏 -->
  <view class="nav-container">
    <scroll-view scroll-x class="nav-category-scroll" show-scrollbar="{{false}}">
      <view class="nav-category-list">
        <view 
          wx:for="{{ categoryList }}" 
          wx:key="id"
          class="nav-category-item {{ currentCategoryId === item.id ? 'active' : '' }}"
          bindtap="switchCategory"
          data-id="{{ item.id }}"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 视频列表 -->
  <scroll-view
    scroll-y
    class="list-container"
    bindscrolltolower="loadMore"
    enable-back-to-top
    enhanced="{{ true }}"
    show-scrollbar="{{ false }}"
    bounces="{{ true }}"
    fast-deceleration="{{ true }}"
  >
    <view class="list">
      <block wx:for="{{ videoList }}" wx:key="id" wx:for-index="idx">
        <!-- 视频广告 -->
        <view wx:if="{{item.adType === 'videoAd' && hasLoadAdConfig}}" class="ad-custom-card">
          <ad unit-id="{{templateAdId}}" ad-type="video" ad-theme="white" data-field="videoError"
            data-name="首页-视频1" data-adId="{{templateAdId}}" bindload="appletsAdLoad"
            binderror="appletsAdError" bindclose="appletsAdClose" style="height: 100%;margin-bottom: 20rpx;"></ad>
        </view>
        <view wx:if="{{ item.adType === 'video' }}">
          <!-- 视频卡片 -->
          <view class="video-item" bindtap="onVideoTap" data-info="{{ item }}" data-id="{{ item.id }}" data-index="{{idx}}">
            <view class="video-cover-container">
              <image
                class="video-cover"
                src="{{ item.cover_image }}"
                mode="aspectFill"
              />
              <view class="play-button-container">
                <view class="play-button" wx:if="{{ !item.lock }}">
                  <image
                    class="play-icon"
                    src="/assets/images/icon-video-play.png"
                  ></image>
                </view>

                <view class="play-button-lock" wx:else>
                  <image
                    class="play-icon"
                    src="/assets/images/icon-lock.png"
                  ></image>
                  <view class="play-button-lock-title">观看广告解锁完整内容</view>
                </view>
              </view>
            </view>

            <view class="video-title">{{ item.title }}</view>
            <view class="video-play-count">{{ item.views }}w+人播放</view>
            <view class="share-button" catchtap="onShareTap">
              <image
                class="share-icon"
                src="/assets/images/icons/icon-wechat.png"
                catchtap="onShareTap"
              ></image>
              <text>分享</text>
              <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
            </view>
          </view>
        </view>
         <!-- 卡片原生广告 -->
         <view wx:if="{{item.adType === 'templateAd' && hasLoadAdConfig }}" class="ad-custom-card-1">
            <ad-custom unit-id="{{templateAdId}}" data-field="templateError" data-name="首页页-卡片原生"
              data-adId="{{templateAdId}}" capture-bind:tap="appletsAdClick" bindload="appletsAdLoad"
              binderror="appletsAdError" style="height: 100%;margin-bottom: 20rpx;"></ad-custom>
          </view>
      </block>
    </view>

    <!-- 加载状态 -->
    <view class="loading-status">
      <!-- loading 提示 -->
      <view class="loading" wx:if="{{ loading }}">
        <view class="loading-spinner"></view>
        <text>加载中...</text>
      </view>

      <!-- 没有更多 -->
      <view
        class="finished"
        wx:if="{{ !loading && videoList.length > 0 && !hasMore }}"
      >
        <text>没有更多视频了</text>
      </view>

      <!-- 空状态 -->
      <view class="empty" wx:if="{{ !loading && videoList.length === 0 }}">
        <image class="empty-icon" src="/assets/images/empty.png"></image>
        <text>暂无视频内容</text>
      </view>
    </view>
  </scroll-view>

  <!-- 刷新按钮 -->
  <view class="refresh-container" bindtap="refreshList">
    <image class="refresh-bg" src="/assets/images/icons/refresh-bg.png"></image>
    <image class="refresh-btn" src="/assets/images/icons/refresh.png"></image>
  </view>
</view>