wx-guyantv/pages/home/index.wxml

<view class="container">
  <view class="fixed left-0 top-0 z-[100001]" style="opacity: {{opacity}}">
    <navbar navbarData="{{navbarData}}" Color="#000" />
  </view>
  <view class="w-full h-[1136rpx] relative " hidden="{{!bannerList.length}}">
    <view class="absolute z-[100002] left-14 w-520 bg-search rounded-full flex items-center pl-36 text-fff"
      style="width:{{capsuleObj.left-14-18}}px; height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;"
      bindtap="openSearch">
      <i class="iconfont icon-search" style="font-size: 24rpx;" />
      <view class="pl-20">寻找你喜欢的短剧</view>
    </view>
    <swiper indicator-dots autoplay class="h-full" indicator-active-color="#FB5196" circular current="{{bannerIndex}}"
      bindchange="bannerChange">
      <block wx:for="{{bannerList}}" wx:key="*this">
        <swiper-item bind:tap="openDetail" data-item="{{item}}">
          <image src="{{item.cover || '/static/no-img.png'}}" class="h-[1000rpx] w-full" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <view class="header-bottom absolute z-9999 top-[840rpx] w-full h-320 flex flex-wrap justify-center">
      <view class="rounded-full text-fff mt-112 px-60 h-96 leading-[96rpx] header-button active:opacity-80 text-32"
        bind:tap="openDetail" data-item="{{bannerList[bannerIndex]}}">
        立即观看
      </view>
    </view>
  </view>
  <!-- 全网热播 -->
  <view class="w-full" hidden="{{!bestList.length}}">
    <view class="model_title mt-10">
      <i class="iconfont icon-fire model_image" style="color: #FB1D00" />
      全网热播
    </view>
    <scroll-view type="list" scroll-x class="w-750 whitespace-nowrap flex items-start pt-32 h-462">
      <block wx:for="{{bestList}}" wx:key="*this">
        <view class="inline-block whitespace-normal pl-24 first:pl-main last:pr-main w-260" bind:tap="openDetail"
          data-item="{{item}}">
          <image src="{{item.cover || '/static/no-img.png'}}" mode="aspectFill" class="w-full h-400 rounded-16" />
          <view class="w-full mt-16 truncate">{{item.name}}</view>
        </view>
      </block>
    </scroll-view>
  </view>
  <!-- 精品短剧 -->
  <view class="mt-48 w-full" hidden="{{!starsList.length}}">
    <view class="model_title">
      <i class="iconfont icon-shoucang model_image" style="color: #FFCC00;" />
      精品短剧
    </view>
    <view class="mt-32 px-main grid gap-16 grid-cols-3 flex-1">
      <block wx:for="{{starsList}}" wx:key="*this">
        <view class="pt-36 [&:nth-child(-n+3)]:pt-0" bind:tap="openDetail" data-item="{{item}}">
          <image src="{{item.cover || '/static/no-img.png'}}" mode="aspectFill" class="h-370 rounded-16 w-full" />
          <view class="mt-16 truncate">{{item.name}}</view>
        </view>
      </block>
    </view>
  </view>
  <!-- 特别推荐 -->
  <view class="best mt-48" hidden="{{!recommend.length}}">
    <view class="model_title">
      <i class="iconfont icon-dianzan model_image" style="color: #FF7D20;" />
      特别推荐
    </view>
    <scroll-view type="list" scroll-x class="whitespace-nowrap w-750 flex items-start h-624 pt-32">
      <block wx:for="{{recommend}}" wx:key="*this">
        <view class="inline-block whitespace-normal pl-24 first:pl-main last:pr-main " bind:tap="openDetail"
          data-item="{{item}}">
          <view class="rounded-16 overflow-hidden bg-linear w-300">
            <image src="{{item.cover || '/static/no-img.png'}}" mode="aspectFill" class="w-full h-500 rounded-16" />
            <view class="px-24 pt-12 whitespace-normal h-114">
              <view class="line-clamp-1	text-fff text-24 w-188">{{item.name}}</view>
              <view class="flex mt-12 pb-20">
                <view
                  class="py-8 px-16 flex flex-wrap items-center mr-16 rounded-full text-20 leading-1 text-600 text-[#ff3859] bg-[#FDC9C9]"
                  hidden="{{!item.like}}">
                  <i class="iconfont icon-fire text-20 pr-4 leading-1" />
                  {{item.like || 0}}
                </view>
                <view class="py-8 px-16 rounded-full text-20 leading-1 text-600 text-[#FDC9C9] bg-[#000000]"
                  hidden="{{!item.categoryname}}">
                  {{item.categoryname}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
  </view>
  <!-- 新剧发布 -->
  <view class="mt-48 w-full" hidden="{{!newList.length}}">
    <view class="model_title">
      <i class="iconfont icon-Vector model_image" style="color: #FF6B2C" />
      新剧发布
    </view>
    <view class="mt-32 px-main">
      <block wx:for="{{newList}}" wx:key="*this">
        <view class="flex flex-wrap items-center bg-[#f5f5f5] rounded-16 overflow-hidden h-290 mt-36 first:mt-0"
          bind:tap="openDetail" data-item="{{item}}">
          <image src="{{item.cover || '/static/no-img.png'}}" mode="aspectFill" alt="404"
            class="h-full w-164 rounded-16" />
          <view class="flex-1 px-32 min-h-214">
            <view class="leading-[30rpx] line-clamp-2">{{item.name}}</view>
            <view class="flex mt-12">
              <view
                class="py-8 px-16 flex flex-wrap items-center mr-16 rounded-full text-20 leading-1 text-600 text-[#ff3859] bg-[#FDC9C9]"
                hidden="{{!item.like}}">
                <i class="iconfont icon-fire text-20 pr-4 leading-1" />
                {{item.like || 0}}
              </view>
              <view class="py-8 px-16 rounded-full text-20 leading-1 text-600 text-[#FDC9C9] bg-[#000000]"
                hidden="{{!item.categoryname}}">
                {{item.categoryname}}
              </view>
            </view>
            <view class="mt-16 text-[#666] text-20 line-clamp-3">{{item.description || ''}}</view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <view class="w-full mt-48">
    <view class="model_title">
      <i class="iconfont icon-a-Layer20 model_image" style="color: #E851A2" />
      <view class="flex-1" bind:tap="openRecommend">短剧排名</view>
      <view class="text-28" bind:tap="openRecommend">更多</view>
      <i class="iconfont icon-more leading-1 text-28 pr-main" />
    </view>
    <view class="relative mt-32">
      <image class="absolute left-0 top-0 w-full z-1b rounded-t-32" src="/static/images/recommend-bg-home.png"
        mode="widthFix" />
      <view class="border-0 sticky w-full top-[-1rpx] z-50">
        <van-tabs active="{{ tabsActive }}" bind:change="onTabsChange" line-width="60rpx" line-height="8rpx"
          color="#FFE59E" style="--tabs-nav-background-color:transparent" title-active-color="#FFE59E"
          title-inactive-color="#fff">
          <van-tab title="最热" name="1"></van-tab>
          <van-tab title="最新" name="2"></van-tab>
        </van-tabs>
      </view>
      <scroll-view type="list" scroll-x class="whitespace-nowrap w-750 h-1500">
        <view class="grid grid-rows-3 grid-flow-col gap-16">
          <view class="inline-block whitespace-normal flex items-center mt-36 h-300 pr-main [&:nth-child(-n+3)]:pl-main"
            wx:for="{{tabsActive === '1' ? hotList : newestList}}" wx:key="*this" bind:tap="openDetail"
            data-item="{{item}}">
            <view class="relative h-full">
              <view class="w-48 h-48 left-main absolute z-2">
                <i
                  class="iconfont icon-ranking leading-1 text-48 {{index===0?'text-[#FFBB27]':index===1?'text-[#E851A2]':index===2?'text-[#2348A3]':'text-[#757575]'}} " />
                <view class="absolute top-0 left-0 text-fff w-full h-full flex flex-wrap justify-center">
                  {{index + 1}}
                </view>
              </view>
              <image src="{{item.cover || '/static/no-img.png'}}" mode="aspectFill" alt="404"
                class="w-218 h-full rounded-16" />
            </view>
            <view class="pl-main w-260 min-h-230">
              <view class="line-clamp-2">{{item.name}}</view>
              <view class="flex mt-12">
                <view
                  class="py-8 px-16 flex flex-wrap items-center mr-16 rounded-full text-20 leading-1 text-600 text-[#ff3859] bg-[#FDC9C9]"
                  hidden="{{!item.like}}">
                  <i class="iconfont icon-fire text-20 pr-4 leading-1" />
                  {{item.like || 0}}
                </view>
                <view class="py-8 px-16 rounded-full text-20 leading-1 text-600 text-[#FDC9C9] bg-[#000000]"
                  hidden="{{!item.categoryname}}">
                  {{item.categoryname}}
                </view>
              </view>
              <view class="text-[#666] text-20 mt-16 line-clamp-3">{{item.description || ''}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <view class="w-full mt-48" hidden="{{!moreList.length}}">
    <view class="model_title">
      <i class="iconfont icon-a-Layer54 leading-1 text-40 pr-12" style="color: #B774FF" />
      更多推荐
    </view>
    <view class="grid grid-cols-2 gap-30 flex-1 px-main mt-32">
      <view class="pb-8" wx:for="{{moreList}}" wx:key="*this" bind:tap="openDetail" data-item="{{item}}">
        <image src="{{item.cover || '/static/no-img.png'}}" mode="aspectFill"
          class="w-full h-500 rounded-16 align-bottom" />
        <view class="text-24 line-clamp-2	pt-16">{{item.name}}</view>
      </view>
    </view>
    <view class="flex justify-center w-full mt-48">
      <loadmore status="{{loadStatus}}" />
    </view>
    <block wx:if="{{history && history.id}}">
      <recentlyPlayed show="{{showHistory}}" data="{{history}}" bindchange="historyChange" />
    </block>
  </view>
</view>
<view
  class="fixed bottom-160 right-main w-80 h-80 bg-gradient-to-r from-[#F3583D] to-[#FA5EAE] rounded-full flex justify-center items-center text-main shadow"
  bindtap="openSearch" wx:if="{{opacity}}" style="opacity: {{opacity}}">
  <i class="iconfont icon-sousuo1 text-36 font-600 text-fff" />
</view>