quickapp_front/src/views/Home/index.ux

<import name="x-book" src="../../components/book/book.ux"></import>
 
<template>
  <div class="home-wrap">
    <div class="type-bar">
      <block for="type in typeList">
        <div class="type-item" @click="typeChange(type.index)">
          <text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
          <text class="choose-bar" show="{{type.index === current}}"></text>
        </div>
      </block>
    </div>
    <list class="list-content">
      <list-item type="search" class="search-bar">
        <div class="search-bar__wrap">
          <image src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"></image>
          <text @click="toCategory">书名</text>
        </div>
      </list-item>
      <list-item type="swipe">
        <swiper class="swipe-bar" autoplay="true" indicator="false">
          <block for="banner">
            <div class="swipe-item">
              <image class="cover" src="https://cdn-newyc.ycsd.cn/ycsd_web_3nd/images/homebanners/夫人，魔尊大人盼你早点死呢1000390.jpg"></image>
            </div>
          </block>
        </swiper>
      </list-item>
      <list-item type="simple" class="book-list__wrap">
        <div class="book-list__title">
          <text>热门推荐</text>
        </div>
        <div class="book-list">
          <block for="books">
            <x-book multi="{{false}}"></x-book>
          </block>
        </div>
      </list-item>
      <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
        <div class="book-list__title">
          <text class="border"></text>
          <text>神书直播</text>
        </div>
        <div class="book-list__line">
          <block for="books.slice(0, 4)">
            <x-book multi="{{false}}" width="{{150}}" lines="{{true}}"></x-book>
          </block>
        </div>
        <div class="book-list__multi">
          <block for="books.slice(4)">
            <div class="book-item">
              <x-book multi="{{true}}" width="{{150}}">
                <div class="book-info__multi">
                  <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
                  <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
                </div>
              </x-book>
            </div>
          </block>
        </div>
      </list-item>
      <list-item type="simple" class="book-list__wrap">
        <div class="book-list__title">
          <text class="border"></text>
          <text>编辑推荐</text>
        </div>
        <div class="book-list">
          <block for="books">
            <x-book multi="{{false}}"></x-book>
          </block>
        </div>
      </list-item>
      <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
        <div class="book-list__title">
          <text class="border"></text>
          <text>新书推荐</text>
        </div>
        <div class="book-list__line">
          <block for="books.slice(0, 4)">
            <x-book multi="{{false}}" width="{{150}}" lines="{{true}}"></x-book>
          </block>
        </div>
        <div class="book-list__multi">
          <block for="books.slice(4)">
            <div class="book-item">
              <x-book multi="{{true}}" width="{{150}}">
                <div class="book-info__multi">
                  <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
                  <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
                </div>
              </x-book>
            </div>
          </block>
        </div>
      </list-item>
    </list>
  </div>
</template>


<script>
import { demoApi } from "../../api";

export default {
  props: {},
  data() {
    return {
      typeList: [
        {
          name: "男生",
          index: 0
        },
        {
          name: "女生",
          index: 1
        }
      ],
      banner: [1, 2, 3],
      books: [1, 2, 3, 4, 5, 6],
      current: 0
    }
  },
  onInit() {
    demoApi().then(r => {
      console.log(r);
    })
  },
  typeChange(index) {
    this.current = index;
  },
  toCategory() {
    this.$emit('change');
  }
}
</script>

<style lang="less">
@import "../../assets/less/home.less";
</style>