<template>
<page-meta
page-style="color: green"
root-font-size="40px"
@scroll="utils.scroll"
</page-meta>
<view class="content">
<view style="width: 100%;height: 500px;background-color: green;"></view>
<view class="tab-fixed" ></view>
</view>
</template>
<script module="utils" lang="wxs">
function scroll(e,ins) {
console.log(99999)
// #ifdef H5
var scrollTop = e.scrollTop
var styleTop = '44px'
// #endif
// #ifdef MP-WEIXIN
var scrollTop = e.detail.scrollTop
var styleTop = 0
// #endif
if(scrollTop >= 500) {
ins.selectComponent('.tab-fixed').setStyle({
position: 'fixed',
left: 0,
top: styleTop
})
} else {
ins.selectComponent('.tab-fixed').setStyle({
position: 'relative'
})
}
}
module.exports = {
scroll:scroll
}
</script>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
onPageScroll() {},
methods: {
}
}
</script>
<style>
.content {
height: 2000px;
background-color: #eee;
width: 100%;
}
.tab-fixed {
width: 100%;
height: 45px;
background-color: red;
}
</style>
-----------------以上代码在h5和小程序运行都没有问题, 在vue文件 app环境下运行 wxs里的函数不执行-------------
预期效果是 当页面滚动到500px 的时候 让 中间让 'tab-fixed' 固定在导航条顶部
1 个回复
1***@qq.com
原来这么早就有这样的问题,官方也没回复呀