首页显示如下：

相关代码如下：

import React, { Component } from 'react'

import Taro from '@tarojs/taro'

import { getHomeSwiper } from '@/api/activity'

import { View, Image, Swiper, SwiperItem, ScrollView, Text } from '@tarojs/components'

import './index.scss'

// getHomeSwiper

class Index extends Component {

  state = {

    current: 0,

    swiper: []

  }

  async componentDidMount() {

    try {

      const res = await getHomeSwiper();

      if (res.code === 200) {

        this.setState({ swiper: res.data.swipers });

      }

      console.log(res)

    } catch (error) {

      console.log(error)

    }

  }

  goSellingWine() {

    console.log('goSellingWine')

    if (this.state.current !== 0) return

    try {

      Taro.navigateTo({

        url: '/pages/lafei/index'

      })

    } catch {

      console.log('跳转失败')

    }

  }

  render() {

    const { current } = this.state

    if (this.state.swiper.length === 0) return <View></View>

    const currentItem: any = this.state.swiper[current];

    return <View className='index'>

      <Swiper

        className='home-swiper'

        indicatorColor='#fff'

        indicatorActiveColor='#525252'

        circular

        autoplay

        onChange={(e) => this.setState({ current: e.detail.current })}

      >

        {this.state.swiper.map((list: any, index) => <SwiperItem key={index} style={{ overflowY: 'scroll' }} className='home-swiper-item'><Image className='index-top' src={list.posterUrl} onClick={this.goSellingWine.bind(this)} />

        {/* 圆圈 */}

          <View className='home-dots'>

            {this.state.swiper.map((item, index3) => <View key={index3} className={current === index3 ? 'home-dot home-dot-active' : 'home-dot'}></View>)}

          </View>

          {currentItem.imgs.map((img, index2) => <Image key={index2} src={img.url} style={img.style} />)}

        </SwiperItem>)}

      </Swiper>

    </View>

  }

}

export default Index