当前位置：
广场学院 >>
曝光功能的收缩 >> 详细内容
曝光功能的收缩
【 广场学院 】2023-05-29 18:39:42
微信开发者
// .wxml
...
// .js
handlePan(e) {
'worklet'
...
if (e.state === GestureState.ACTIVE) {
if (this._interactionState.value === InteractionState.UNFOLD) {
// 展开状态下，往上滑才折叠起来
if (e.absoluteY - this._startY.value < 0) {
this._interactionState.value = InteractionState.ANIMATING
this._translY.value = timing(0.0, { duration: 250 }, () => {
'worklet'
this._interactionState.value = InteractionState.RESET
})
}
} else {
// 其它情况，跟随手指滑动
this._translY.value = e.absoluteY - this._startY.value
}
}
// 其他状态下的处理
...
},
// 最外层 .page 往上挪
this.applyAnimatedStyle('.page', () => {
'worklet'
const translY = clamp(this._translY.value, -this._tabsTop.value, 0)
return {
transform: `translateY(${translY}px)`
}
})
// 改变 .navigation-bar 背景色
this.applyAnimatedStyle('.navigation-bar', () => {
'worklet'
const translY = clamp(this._translY.value, -this._tabsTop.value, 0)
const opacity = translY / -this._tabsTop.value
return {
backgroundColor: `rgba(255, 255, 255, ${opacity})`
}
})
// 输入框：改变宽度并且展示
this.applyAnimatedStyle('.search-input', () => {
'worklet'
const translY = clamp(this._translY.value, -this._tabsTop.value, 0)
const percentage = translY / -this._tabsTop.value
return {
width: `${percentage * 60 + 40}%`,
opacity: percentage,
}
})
上一篇： 为什么帅炸天的军车很难民用化？
下一篇： 关于投资印度
对不起，没有相关评论！
广场联盟 @ SeaLand Studio 2015-2016