yky-wx-components1/src/components/tabSwiperHooks.js

Taro实现微信小程序红包雨效果

import Taro, { useState,Component } from '@tarojs/taro'
import { View, Button, Text , Swiper, SwiperItem} from '@tarojs/components'
import {AtButton,AtCard,AtTabs, AtTabsPane,AtList, AtListItem,AtTabBar,AtIcon,AtFloatLayout,AtTextarea,AtInput} from 'taro-ui'
import { imgUrl, judgeEmpty, exportBaseUrl, hidebankCard, encrypt,toThousands, CZBANK, openPDF } from '../utils/utils'
import moment from 'moment'
import { get,set} from '../../global_data'
import './index.less'

 function HooksPage() {
  HooksPage.options = { addGlobalClass: true }


  let [lendingCount, setCount] = useState(0);
  // let [count, setCount] = useState<number>(0);
const lendingDetails={}
// 切换卡片信息
const onChangeCostInformationByManage = () => {
  // this.setState({
  //   costInformationCurent: 0
  // })
  setCount(0)
}
const handlecostcardChange=(e)=>{
  console.log(e.target.current)
  setCount(e.target.current)
 
}
const onChangeCostInformationByService = () => {
  // this.setState({
  //   costInformationCurent: 1
  // })
  setCount(1)
}
const onChangeInterestExpense= (e) => {
  console.log(e)
  // this.setState({
  //   costInformationCurent: 2
  // })
  setCount(e)
}
const {tabObj,swiperObj}=this.props
console.log(tabObj)
  return (
    <View>
    <AtCard className='assure-message-card cost-message-card' id='cost-message-card'>
            <View className='at-article__h3'>费用信息</View>
            <Swiper
              className='cost-message-top'
              vertical={false}
              circular={false}
              indicatorDots={false}
              autoplay={false}
              displayMultipleItems='3.5'
              >
                {
                  tabObj&&tabObj.map((item,index)=>{
                    return(
             
                            <SwiperItem >
                      <View className={lendingCount == index ? 'cost-list arrow active' : 'cost-list'}>
                      <View onClick={()=>{onChangeInterestExpense(index)}}>
                        <View   className='cost-icon'><Image src={item.imgUrl} style="width:64rpx;height:64rpx" /></View>
                        <View className='cost-text'>{item.title}</View>
                      </View>
                      </View>
                    </SwiperItem>
                      
                  
                    )
                  })
                }
            
       
              <SwiperItem></SwiperItem>
              <SwiperItem></SwiperItem>
              </Swiper>
              <Swiper
              className='cost-message-bottom'
              indicatorColor='#D0D0D0'
              indicatorActiveColor='#518DFA'
              vertical={false}
              circular={false}
              indicatorDots
              autoplay={false}
              displayMultipleItems='1'
              style={{maxHeight:'300rpx'}}
              current={lendingCount}
              onChange={(e)=>{handlecostcardChange(e)}}
              >
                {
                  tabObj&&tabObj.map((item,index)=>{
                    return(
                      <SwiperItem>
                      <View className='cost-list'>
                      <View className='basic-con'>
                          {
                          item&&item.tArr.map((data,index)=>{
                            return(
                              <View className='basic-list'><View>{data.name}</View><View> {swiperObj && swiperObj[data.type] ? swiperObj[data.type] : noInfo}</View></View>
                            )
                          })
                          }
                      
                      </View>
                      </View>
                    </SwiperItem>
                    )
                  })
                }
             
              </Swiper> 
          </AtCard>

    </View>
  );
}



export default HooksPage