溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在APP中免不了要使用tab組件,有的是tab切換,也有的是tab分類切換.
這些組件分成下面兩種.
第一種非常簡單,同時大多數第三方組件都能達到效果.這里重點講述第二種,我們要讓第二種組件不僅能左右滑動,同時還能夠在點擊的時候自動滑動,將點擊的位置滑動到正中間.
準備
我們先來分析一波.一個滑動組件在APP上是一種什么狀態(tài).
這里可以看出,tab組件需要考慮到長度超過APP的屏幕,并且在超過之后能夠滑動.
同時計算出當前位置需要滑動多少距離才能夠將位置居中.
需要滑動的位置=點擊位置的左邊距-APP屏幕/2+點擊位置的寬度/2
這個公式也就是我們自動滑動的核心了.
開發(fā)
使用ScrollView組件承載tab項,這樣就可以非常簡單的達到滑動的效果.同時添加horizontal、directionalLockEnabled、showsHorizontalScrollIndicator、snapToAlignment幾個屬性.
<ScrollView ref={e => this.scroll = e}
horizontal directionalLockEnabled
showsHorizontalScrollIndicator={false}
snapToAlignment="center">
{this.props.data.map((item, index) =>
{/*具體項*/}
)}
</ScrollView>
使用TouchableOpacity包裹內容項,同時調用setLaout方法將每個項的寬高等屬性記錄下來,為我們后面計算當前位置做準備.
<TouchableOpacity onPress={() => this.setIndex(index)}
onLayout={e => this.setLaout(e.nativeEvent.layout, index)}
key={item.id}
style={tabBarStyle.itemBtn}>
<Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
<View style={[tabBarStyle.line, this.state.index === index ? tabBarStyle.active2 : null]}> </View>
</TouchableOpacity>
記錄每個項渲染之后的位置,將這些值存在變量里,為后面計算做準備.
laout_list = []
setLaout(layout, index) {
//存單個項的位置
this.laout_list[index] = layout;
//計算所有項的總長度
this.scrollW += layout.width;
}
接下來就是點擊自動變換位置的計算了.
setIndex(index, bl = true) {
//先改變點擊項的顏色
this.setState({ index })
//兼容錯誤
if (!this.scroll) return;
//拿到當前項的位置數據
let layout = this.laout_list[index];
let rx = deviceWidth / 2;
//公式
let sx = layout.x - rx + layout.width / 2;
//如果還不需要移動,原地待著
if (sx < 0) sx = 0;
//移動位置
sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
//結尾部分直接移動到底
sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
//觸發(fā)一些需要的外部事件
this.props.onChange && this.props.onChange(index);
}
gitee地址
github地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
