taro scroll tabs
滚动标签 切换
https://www.cnblogs.com/lml-lml/p/10954069.html
https://developers.weixin.qq.com/community/develop/doc/000cc0b94ac5f8dcf4e7666475b804
https://blog.csdn.net/weixin_42860683/article/details/83817925
https://juejin.im/post/5d563b5e6fb9a06b317b5d20
taro
import Taro, {
Component,
} from '@tarojs/taro'
import {
View,
Text,
ScrollView,
} from '@tarojs/components'
import classnames from 'classnames'
import './TabList.scss'
export default class TabList extends Component {
state = {
active: 0,
}
componentWillMount() {
this.setState({
active: this.props.current || 0,
})
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
const { current } = nextProps
if (current !== this.props.current) {
this.setState({
active: current,
})
}
}
onSelectTab(index) {
this.setState({
active: index,
})
this.props.onSelected && this.props.onSelected(index)
}
render() {
let { tabs, tabItemStyle, scrollWithAnimation } = this.props
let { active } = this.state
return (
tabs.length && <ScrollView className="tab-list" scrollX scrollWithAnimation={scrollWithAnimation}
scrollIntoView={`tab-${active >= 2 ? (active - 2) : 0}`}
>
<View className="tab-list__container">
{
tabs.map((item, index) => {
return (
<View style={tabItemStyle} className={classnames([
'tab-item',
{
active: active === index,
},
])} onClick={this.onSelectTab.bind(this, index)} key={index} id={`tab-` + index}
>
<Text>{item.name}</Text>
<View className="tab-line"></View>
</View>
)
})
}
</View>
</ScrollView>
)
}
}
TabList.defaultProps = {
tabs: [],
current: 0,
tabItemStyle: 'height:78rpx',
scrollWithAnimation: process.env.TARO_ENV === 'weapp',
}
scroll tab 组件
开发一个可以滚动的tab组件
https://github.com/ScoutYin/ly-tab#readme
https://github.com/ScoutYin/ly-tab/tree/master/src
https://www.cnblogs.com/lml-lml/p/10954069.html
window.requestAnimationFrame
animation
export function windowInit () {
var lastTime = 0
var vendors = ['webkit', 'moz']
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame']
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime()
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime))
var interval = currTime - lastTime
var id = window.setTimeout(function () {
callback(interval)
}, timeToCall)
lastTime = currTime + timeToCall
return id
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id)
}
}
}
touch event
methods: {
// start
handleTouchStart (event) {
event.stopPropagation()
cancelAnimationFrame(this.inertiaFrame)
this.lastX = event.touches[0].clientX
},
// move
handleTouchMove (event) {
if (this.listWidth <= 0) return
event.preventDefault()
event.stopPropagation()
this.touching = true
this.startMoveTime = this.endMoveTime
this.startX = this.lastX
this.currentX = event.touches[0].clientX
this.moveFollowTouch()
this.endMoveTime = event.timeStamp // 每次触发touchmove事件的时间戳;
},
// end
handleTouchEnd (event) {
this.touching = false
if (this.checkReboundX()) {
cancelAnimationFrame(this.inertiaFrame)
} else {
let silenceTime = event.timeStamp - this.endMoveTime
let timeStamp = this.endMoveTime - this.startMoveTime
timeStamp = timeStamp > 0 ? timeStamp : 8
if (silenceTime > 100) return // 停顿时间超过100ms不产生惯性滑动;
this.speed = (this.lastX - this.startX) / timeStamp
this.acceleration = this.speed / this.sensitivity
this.frameStartTime = new Date().getTime()
this.inertiaFrame = requestAnimationFrame(this.moveByInertia)
}
},
// 如果需要回弹则进行回弹操作并返回true;
checkReboundX () {
this.reBounding = false
if (this.translateX > 0) {
this.reBounding = true
this.translateX = 0
} else if (this.translateX < -this.listWidth) {
this.reBounding = true
this.translateX = -this.listWidth
}
return this.translateX === 0 || this.translateX === -this.listWidth
},
bindEvent () {
this.$el.addEventListener('touchstart', this.handleTouchStart, false)
this.$el.addEventListener('touchmove', this.handleTouchMove, false)
this.$el.addEventListener('touchend', this.handleTouchEnd, false)
},
removeEvent () {
this.$el.removeEventListener('touchstart', this.handleTouchStart)
this.$el.removeEventListener('touchmove', this.handleTouchMove)
this.$el.removeEventListener('touchend', this.handleTouchEnd)
},
// touch拖动
moveFollowTouch () {
if (this.isMoveLeft) { // 向左拖动
if (this.translateX <= 0 && this.translateX + this.listWidth > 0 || this.translateX > 0) {
this.translateX += this.currentX - this.lastX
} else if (this.translateX + this.listWidth <= 0) {
this.translateX += this.additionalX * (this.currentX - this.lastX)
/ (this.viewAreaWidth + Math.abs(this.translateX + this.listWidth))
}
} else { // 向右拖动
if (this.translateX >= 0) {
this.translateX += this.additionalX * (this.currentX - this.lastX)
/ (this.viewAreaWidth + this.translateX)
} else if ((this.translateX <= 0 && this.translateX + this.listWidth >= 0) ||
this.translateX + this.listWidth <= 0) {
this.translateX += this.currentX - this.lastX
}
}
this.lastX = this.currentX
},
// 惯性滑动
moveByInertia () {
this.frameEndTime = new Date().getTime()
this.frameTime = this.frameEndTime - this.frameStartTime
if (this.isMoveLeft) { // 向左惯性滑动;
if (this.translateX <= -this.listWidth) { // 超出边界的过程;
// 加速度指数变化;
this.acceleration *= (this.reBoundExponent +
Math.abs(this.translateX + this.listWidth)) /
this.reBoundExponent
this.speed = Math.min(this.speed - this.acceleration, 0) // 为避免减速过程过短，此处加速度没有乘上frameTime;
} else {
this.speed = Math.min(this.speed - this.acceleration * this.frameTime, 0)
}
} else if (this.isMoveRight) { // 向右惯性滑动;
if (this.translateX >= 0) {
this.acceleration *= (this.reBoundExponent + this.translateX) / this.reBoundExponent
this.speed = Math.max(this.speed - this.acceleration, 0)
} else {
this.speed = Math.max(this.speed - this.acceleration * this.frameTime, 0)
}
}
this.translateX += this.speed * this.frameTime / 2
if (Math.abs(this.speed) <= this.zeroSpeed) {
this.checkReboundX()
return
}
this.frameStartTime = this.frameEndTime
this.inertiaFrame = requestAnimationFrame(this.moveByInertia)
},
// 计算activeBar的translateX
calcBarPosX () {
if (this.fixBottom || !this.$children.length) return
if (this.$children.length <= this.value) return
const item = this.$children[this.value].$el
const itemWidth = item.offsetWidth
const itemLeft = item.offsetLeft
this.activeBarWidth = Math.max(itemWidth * 0.6, 14)
this.activeBarX = itemLeft + (itemWidth - this.activeBarWidth) / 2
},
// 点击切换item时，调整位置使当前item尽可能往中间显示
checkPosition () {
if (this.fixBottom || !this.$children.length) return
if (this.$children.length <= this.value) return
const activeItem = this.$children[this.value].$el
const offsetLeft = activeItem.offsetLeft
const half = (this.viewAreaWidth - activeItem.offsetWidth) / 2
let changeX = 0
const absTransX = Math.abs(this.translateX)
if (offsetLeft <= absTransX + half) { // item偏左，需要往右移
let pageX = offsetLeft + this.translateX
changeX = half - pageX
} else { // item偏右，需要往左移
changeX = -(offsetLeft - absTransX - half)
}
let lastX = changeX + this.translateX
// 两种边界情况
lastX > 0 && (lastX = 0)
lastX < -this.listWidth && (lastX = -this.listWidth)
this.reBounding = true
this.translateX = lastX
}
}
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！