uniapp onPageScroll监听页面滚动不起作用？解决方案

最新推荐文章于 2025-08-22 11:41:08 发布

原创最新推荐文章于 2025-08-22 11:41:08 发布 · 5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了微信小程序中页面滚动效果的实现，特别是当遇到滚动条不生效的问题时，指出只有全局滚动时才会触发滚动事件。同时，介绍了在Vue中监听对象属性值变化的三种方法，包括使用computed属性、设置deep为true以及直接监听属性变化，并提供了相应的代码示例。

页面出现了滚动条，为啥我滚动页面这方法不起作用？

·回复

要页面活动才有效，局部滚动，比如ss产生的滚动条是无效的

微信小程序页面滚动头部显示隐藏

<view class="roll" style=" opacity:{{headshow}};">
<view class="title">
好货到家
</view>
</view>data｛    headshow: 0｝
  onPageScroll: function (e) {
    let opacity = 0
    if (e.scrollTop <= 400) {
      opacity = e.scrollTop / 400
    } else {
      opacity = 1
    }
    this.setData({
      headshow: opacity
    })
  },

VUE 监听对象属性值变化的三种方式

//示例：
//监听一下对象 formCode 中 属性 application 的变化：
<script>
export default{
    data(){
        return{
            formCode:{
                application:"",
                oldcode:"",
                newcode:""
            }
        ｝
    ｝
｝
</script>


//第一种方式：watch 结合 computed
computed:{
    application(){
        return this.formCode.application
    }        
},
watch:{
    application:function(val){
         console.log(val)
    }
｝


//第二种方式： 使用 deep
watch:{
　　formCode:{
    　　handler(newVal){
        　　console.log(newVal)
    　　},
    　　deep:true
　　}

}


//第三种方式：
watch:{
　　'formCode.application'(newVal,oldVal){
    　　if(newVal != oldVal && newVal != ""){
        　　this.vDisable = false;
        　　var appName = newVal.split("-")[0]
        　　this.getVersionData(appName)
    　　}
　　}  
}