Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
70b7d11e
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6005
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
70b7d11e
编写于
7月 24, 2023
作者:
DCloud-yyl
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
优化“随滚动折贴的导航栏”直接操作Node更新style,避免其它数据绑定逻辑影响
上级
a0d2083e
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
12 addition
and
8 deletion
+12
-8
pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
+12
-8
未找到文件。
pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
浏览文件 @
70b7d11e
...
@@ -11,10 +11,8 @@
...
@@ -11,10 +11,8 @@
</view>
</view>
</scroll-view>
</scroll-view>
<view class="top-box" :style="{height:(110 - (scrollTop>40?40:scrollTop) )+'px','background-color': 'rgba(255, 255, 255, '+(scrollTop*3>100?100:scrollTop*3)/100+')'}">
<view ref="top-box" class="top-box" style="height:110px;background-color:rgba(255,255,255,0)">
<view class="scroll-fold-nav"
<view ref="scroll-fold-nav" class="scroll-fold-nav">
:style="{'opacity': 1 -(scrollTop*3>100?100:scrollTop*3)/100}"
>
<view style="margin-left: 30px;">DCloud 为开发者而生</view>
<view style="margin-left: 30px;">DCloud 为开发者而生</view>
</view>
</view>
<view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
<view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
...
@@ -39,16 +37,20 @@
...
@@ -39,16 +37,20 @@
return {
return {
scrollTop: 0,
scrollTop: 0,
searchWidth: 700,
searchWidth: 700,
searchNode: null as INode|null
searchNode: null as INode|null,
boxNode: null as INode|null,
navNode: null as INode|null
}
}
},
},
methods: {
methods: {
onScroll(e : ScrollEvent) {
onScroll(e : ScrollEvent) {
let scrollTop = e.detail.scrollTop
let scrollTop = e.detail.scrollTop
this.searchNode?.style?.setProperty('width',700 - (scrollTop>40?40:scrollTop) +'rpx');
this.boxNode?.style?.setProperty('height', (110 - (scrollTop>40?40:scrollTop) )+'px');
this.searchNode?.style?.setProperty('top',0 - (scrollTop>40?40:scrollTop) +'px');
this.boxNode?.style?.setProperty('background-color', 'rgba(255, 255, 255, '+(scrollTop*3>100?100:scrollTop*3)/100+')');
this.navNode?.style?.setProperty('opacity', 1 - (scrollTop*3>100?100:scrollTop*3)/100.0);
this.searchNode?.style?.setProperty('width', 700 - (scrollTop>40?40:scrollTop) +'rpx');
this.searchNode?.style?.setProperty('top', 0 - (scrollTop>40?40:scrollTop) +'px');
this.scrollTop = scrollTop;
this.scrollTop = scrollTop;
console.log('onScroll', e);
},
},
back(){
back(){
// uni.navigateBack() // 这么写用不了
// uni.navigateBack() // 这么写用不了
...
@@ -81,6 +83,8 @@
...
@@ -81,6 +83,8 @@
},
},
onReady() {
onReady() {
this.searchNode = this.$refs['search'] as INode;
this.searchNode = this.$refs['search'] as INode;
this.boxNode = this.$refs['top-box'] as INode;
this.navNode = this.$refs['scroll-fold-nav'] as INode;
}
}
}
}
</script>
</script>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录