首页开发
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
.icon_a_cuowuwrong_self {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 27px;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
border: #ccc 1px solid;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import style from "./index.module.scss"
|
||||
|
||||
type Params = {
|
||||
onClose?: () => void,
|
||||
styleObj?: Object
|
||||
}
|
||||
|
||||
export default memo(({onClose, styleObj = {}}:Params) => {
|
||||
return (
|
||||
<View
|
||||
style={styleObj}
|
||||
className={`iconfont icon-a-cuowuwrong ${style.icon_a_cuowuwrong_self}`}
|
||||
onClick={onClose}
|
||||
></View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
.search_main{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.icon_a_sousuo1_self{
|
||||
font-size: 37px;
|
||||
color: $color_font_two;
|
||||
margin-right: 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
.search_con{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
input{
|
||||
font-size: 27px;
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
padding: 0 60px 0 60px;
|
||||
box-sizing: border-box;
|
||||
&::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.search_closeBtn{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Input, View } from "@tarojs/components";
|
||||
import styles from "./index.module.scss"
|
||||
import CloseBtn from "@/components/closeBtn"
|
||||
import { memo, useState } from "react";
|
||||
|
||||
type Params = {
|
||||
clickOnSearch?: () => void
|
||||
disabled?: false|true,
|
||||
placeholder?: string,
|
||||
changeOnSearch?:(any) => void,
|
||||
showIcon?: false|true,
|
||||
style?: Object
|
||||
}
|
||||
|
||||
export default memo(({
|
||||
clickOnSearch,
|
||||
changeOnSearch,
|
||||
disabled = false,
|
||||
placeholder = '输入搜索内容',
|
||||
showIcon = true,
|
||||
style = {}
|
||||
}:Params) => {
|
||||
const [inputCon , setInputCon] = useState('')
|
||||
|
||||
const onInputEven = (e) => {
|
||||
const value = e.detail.value
|
||||
setInputCon(value)
|
||||
changeOnSearch?.(value)
|
||||
}
|
||||
|
||||
const clearInput = () => {
|
||||
setInputCon('')
|
||||
changeOnSearch?.('')
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.search_main} onClick={() => clickOnSearch?.()} style={style}>
|
||||
<View className={styles.search_con}>
|
||||
{showIcon&&<View className={`iconfont icon-sousuo ${styles.icon_a_sousuo1_self}`}></View>}
|
||||
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
|
||||
{!!inputCon&&<View className={styles.search_closeBtn}>
|
||||
<CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
|
||||
</View>}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,43 @@
|
||||
.sideBar_main{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.sideBar_select{
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 0 10px 10px 0;
|
||||
::-webkit-scrollbar {
|
||||
display:none;
|
||||
width:0;
|
||||
height:0;
|
||||
color:transparent;
|
||||
}
|
||||
.sideBar_select_title{
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
font-size: $font_size;
|
||||
color: #727272;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 400;
|
||||
.title_con{
|
||||
width: 74px;
|
||||
@include common_ellipsis($params:4);
|
||||
}
|
||||
|
||||
}
|
||||
.sideBar_select_title_select{
|
||||
background-color: $color_bg_one;
|
||||
color: $color_font_one;
|
||||
}
|
||||
}
|
||||
.sideBar_con{
|
||||
flex: 1;
|
||||
.sideBar_con_scroll{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ScrollView, View } from "@tarojs/components"
|
||||
import { memo, ReactNode, useRef, useState } from "react"
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Taro, { useReady } from "@tarojs/taro";
|
||||
import { useCallback } from "react";
|
||||
|
||||
type ListProps = {
|
||||
title: string,
|
||||
value: number
|
||||
}
|
||||
|
||||
type Params = {
|
||||
list?: ListProps[],
|
||||
defaultValue?: number|string,
|
||||
children?: ReactNode,
|
||||
height?: string,
|
||||
heightItem?: number,
|
||||
sideBarOnClick?: (ListProps) => void
|
||||
}
|
||||
|
||||
export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
|
||||
|
||||
let num_half = useRef(0)
|
||||
|
||||
const [selected, setSelected] = useState(defaultValue)
|
||||
const [tabId, setTabId] = useState('')
|
||||
|
||||
const init = () => {
|
||||
const index = list?.findIndex(item => {
|
||||
return item.value == defaultValue
|
||||
})
|
||||
if(index !== -1) {
|
||||
computeSelectTab(index)
|
||||
}
|
||||
}
|
||||
|
||||
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
|
||||
setSelected(item.value)
|
||||
sideBarOnClick?.(item)
|
||||
computeSelectTab(index)
|
||||
}
|
||||
|
||||
const computeSelectTab = (index) => {
|
||||
if((index + 1) > num_half.current) {
|
||||
let num = index + 1 - num_half.current
|
||||
setTabId(list[num].value.toString())
|
||||
} else {
|
||||
setTabId(list[0].value.toString())
|
||||
}
|
||||
}
|
||||
|
||||
useReady(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select('.side_bar_select').boundingClientRect(rect=>{
|
||||
let clientHeight = rect.height;
|
||||
let clientWidth = rect.width;
|
||||
let ratio = 750 / clientWidth;
|
||||
let height = clientHeight * ratio;
|
||||
num_half.current = Math.ceil(height/2/heightItem)
|
||||
init()
|
||||
}).exec();
|
||||
})
|
||||
|
||||
const formatTitle = useCallback((title = '') => {
|
||||
let arr: ReactNode[]= []
|
||||
let str = ''
|
||||
for (let i = 1; i <= title.length; i++) {
|
||||
str += title[i-1]
|
||||
if(i == title.length|| i%2 == 0) {
|
||||
const node = <View className={styles.title_list}>{str}</View>
|
||||
arr.push(node)
|
||||
str = ''
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={classnames(styles.sideBar_main,'side_bar_select')}>
|
||||
<ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
|
||||
{
|
||||
list?.map((item, index) => {
|
||||
return(
|
||||
<View
|
||||
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
|
||||
onClick={() => clickEvent({item, index})}
|
||||
id={`tab_${item.value}`}
|
||||
key={item.value}
|
||||
style={{height:heightItem+'rpx'}}
|
||||
>
|
||||
{/* {formatTitle(item.title)} */}
|
||||
<View className={styles.title_con}>
|
||||
{item.title}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
<View className="common_safe_area_y"></View>
|
||||
</ScrollView>
|
||||
<View className={styles.sideBar_con}>
|
||||
<ScrollView className={styles.sideBar_con_scroll} style={{height}} scrollY>
|
||||
{children}
|
||||
<View className="common_safe_area_y"></View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,18 @@
|
||||
.swiper_con{
|
||||
padding:0 20px;
|
||||
height: 178px;
|
||||
.xswiper {
|
||||
height: 100% !important;
|
||||
border-radius: 20px;
|
||||
.image_item{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type item = {title:string, img:string, url:string, id:number}
|
||||
|
||||
type params = {
|
||||
list?: item[]
|
||||
swiperOnClick?: (val: item) => void
|
||||
}
|
||||
export default (props:params) => {
|
||||
let {list = [], swiperOnClick} = props
|
||||
list = [
|
||||
{
|
||||
title:'数据',
|
||||
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
|
||||
url:'',
|
||||
id:1
|
||||
}
|
||||
]
|
||||
const goLink = (item) => {
|
||||
swiperOnClick?.(item)
|
||||
}
|
||||
return (
|
||||
<View className={styles.swiper_con}>
|
||||
<Swiper
|
||||
className={styles.xswiper}
|
||||
indicatorColor='#ccc'
|
||||
indicatorActiveColor='#fff'
|
||||
circular
|
||||
indicatorDots
|
||||
autoplay>
|
||||
{
|
||||
list.map(item => {
|
||||
return <SwiperItem key={item.id}>
|
||||
<View className={styles.image_item} onClick={() => goLink(item)}>
|
||||
<Image mode="aspectFill" src={item.img}></Image>
|
||||
</View>
|
||||
</SwiperItem>
|
||||
})
|
||||
}
|
||||
</Swiper>
|
||||
</View>
|
||||
)
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user