**
内容中有代码解析
**
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './tabs.scss'
interface IProps { //可以继承自父类,即可以从父组件中传递过来(这里面声明的必须的方法名,父组件中必须要传)
tabList: Array<{ //要传入的值是数组,必须要尖括号包裹起来
title: string,
active?: boolean
}>,
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse', //问号的意思是可传可不传(是否换行的意思)
maxOneRow?: number, //每行最多几个
current: number, //没问号的意思是必传,后面的number是变量的类型
onClick: any,
}
***//定义的必要变量名是要在组件中传递过来的,可以由父组件来控制状态及数据变化***
export default class Tabs extends Component<IProps> { //将定义的组件暴露出去,继承自组件的IProps属性
_touchDot: number = 0 //手指触摸到的页面距离
_timer: any = null //定时器,每100毫秒执行一次
_interval: number = 0
_isMoving: boolean = false //是否移动了,以上几个都是组件内部需要用到的变量
handleClick(current) { //触发的点击事件
const { onClick } = this.props 组件中onClick触发的方法,从父组件中传递过来,(传给父组件的方法,必须以on开头)
onClick && onClick(...arguments) //onClick存在(即为true时),执行后面的onClick方法,...arguments是展开伪数组
}
hadleTouchStart(e) { //手指触摸屏幕事件
this._touchDot = e.touches[0].pageX
this._timer = setInterval(() => {
this._interval++ //默认0
}, 100)
}
hadleTouchMove(e) { //开始滑动的事件,组件中的方法,但是用到了父组件的变量,需要传递进来,,通过手指的滑动,触发handleClick事件的current加一或者是减一
const {
current,
tabList
} = this.props
const touchMove = e.touches[0].pageX //手指触摸屏幕的位置
const moveDistance = touchMove - this._touchDot //手指移动的距离
const maxIndex = tabList.length //最大的index,即一共有多少块减一
//下面判断是左滑和右滑, //_isMoving 肯定是false,取反, //_interval ,一秒内滑动 //this._touchDot 滑动的距离大于20排序,限定滑动的条件
if (!this._isMoving && this._interval < 10 && this._touchDot > 20) {
// 向左滑动
if (current + 1 < maxIndex && moveDistance <= -100) {
this._isMoving = true
this.handleClick(current + 1)
// 向右滑动
} else if (current - 1 >= 0 && moveDistance >= 100) {
this._isMoving = true
this.handleClick(current - 1)
}
}
}
handleTouchEnd(e) { //滑动结束的事件,清除定时器,_interval 归零,_isMoving 归位
clearInterval(this._timer)
this._interval = 0
this._isMoving = false
}
render() {
Taro.createBLEConnection
// flexWrap = 'nowrap',maxOneRow = 3 根据需要可自定义,也可写死,,先把this.props中的变量解构出来,下面用到的时候,就不用写那么长了
const { tabList, current, flexWrap = 'nowrap', maxOneRow = 3, children } = this.props
return <View className='tabs'>
<View className='hd' style={`flex-wrap: ${flexWrap};`}>
{tabList.map((tab, i) => {
return <View
className={`option ${i === current ? 'option_active' : ''}`} //当当前的current等于对应的index时,添加对应的样式
style={`width: ${
flexWrap === 'nowrap' //当不换行时,每个tab项的宽度是100/总项数(均衡)
? (100 / tabList.length)
: (100 / maxOneRow)}%`} //换行时,100/一行最多的个数
onClick={this.handleClick.bind(this, i)}>
{tab.title}
<View className='underline'></View>
</View>
})}
</View>
<View className='bd' onTouchStart={this.hadleTouchStart.bind(this)} onTouchMove={this.hadleTouchMove.bind(this)} onTouchEnd={this.handleTouchEnd.bind(this)}>
{children}
</View>
</View>
}
}
下面是运用-------------------------------
1.import Tabs from ‘…/…/component/tabs/tabs’
2.state:any={
tabs: [ //传入的tab要以数组的形式(组件声明)传入进去
{ title: ‘租借’ },
{ title: ‘换电’ },
{ title: ‘赎回’ },
{ title: ‘共享’ },
{ title: ‘购买’ },
{ title: ‘线充’ },
],
}
<Tabs tabList={tabs} onClick={this.tabClick.bind(this)} current={tabsCur} flexWrap='wrap'> //使用父组件本身定义的变量,本身的变量控制组件的状态
<ScrollView //tab组件下面的children即为此处的ScrollView
className='scroll'
scrollY
upperThreshold={10}
lowerThreshold={10}
onScrollToUpper={this.refreshList.bind(this)}
onScrollToLower={orders.length >= limit && orders.length < total ? this.loadMore.bind(this) : () => { }}>
{orders.map(order => { //orders是父组件(即使用组件的页面),可以正常使用当前页面的变量
if (order) { //页面标签中加判断条件,必须要在遍历事件中,否则直接加判断条件的话,会报错,也不会执行
return <OrderItem
type={types}
status={order.status}
use_shop_benefit={order.use_shop_benefit}
terminal={order.terminal}
old_terminal={order.old_terminal}
new_terminal={order.new_terminal}
order_id={order.order_id}
shop_name={order.shop_name}
rent_time={order.rent_time}
rebuy_time={order.rebuy_time}
return_time={order.return_time}
time={order.time}
buy_time={order.buy_time}
use_time={order.use_time}
total_fee={order.total_fee}
real_fee={order.real_fee}
income={order.income}
line_id={order.line_id}
rent_total_time={order.rent_total_time}
onRentBuy={this.rentBuy.bind(this, order.order_id)}
onRentBuyTip={this.rentBuyTip.bind(this)}
onLineRef={this.lineRefund.bind(this, order.order_id, order.line_id)}
onRentPay={this.rentPay.bind(this, order.order_id)}
/>
}
})}
{(!orders.length || orders.length >= total) && <View className='no_more'>-------- 没有更多订单了 --------</View>}
</ScrollView>
</Tabs >