微信小程序页面向上滚动隐藏顶部菜单

实现效果为页面向上滚动隐藏顶部分类菜单,向下滚动则显示顶部菜单,效果图如下所示:

onLoad

onPageScroll

需求: 当滚动到某个view的时候将view置顶 当滚动条回到view开始的位置下面时再回到原位置

效果:

实现: 使用 onPageScroll 方法首先检测到滚动的位置 escrollTop 在滚动的同时来获取view与顶部的距离,因为这个view 上面的view 是不固定的可以减少 或者增多所以要时时来检测变化的高度

判断 如果离顶部距离 为0 时 将view置顶 使用动态样式来判断

同时在检测顶部距离为0的时候记录一下高度 然后当滚动高度等于记录的高度的时候再讲view 返回

备注 条条大路通罗马 小弟浅见

最近公司开发的小程序中，用到了小程序的picker组件，写了个二级级联动（三级联动同理）。从页面上看，明显数据已经是加载上去了，而且也确实是正确的

从这张图上可以看到，明明第二列的数组已经设置是长度为一个，但是在页面上，却显示了两个。

排查下来，就是文本中，name不能重名。必须保持是唯一的。

当我们把name设置成唯一值的时候，就不会有问题了。

1、将scroll-view的scroll-y属性设置为false，这样可以禁用scroll-view的纵向滑动功能，避免滑动条出现。

2、在input组件绑定focus和blur事件，当input组件被聚焦时，将scroll-view组件滚动到输入框所在的位置，当input组件失去聚焦时，将scroll-top值设置为0，这样可以让页面回到最顶部。

微信小程序 ，列表头滚动的过程中 ，view  悬浮在顶部  ，如何实现这样的一个效果呢？？

//indexjs

//获取应用实例

const app = getApp()

Page({

  data: {

    testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],

    testData2: [1, 2, 3, 4, 5,  10],

    //是否显示 悬停布局

    isshow:false,

    //悬浮布局的数据

    toptexxt:""

  },

  onLoad: function () {

  },

  /

页面加载完成

/

  onReady: function () {

  },

  /

页面滚动监听

/

  onPageScroll: function (e) {

    //consolelog(e)

    let that = this

    let query = wxcreateSelectorQuery()

    queryselectAll("section-cell")boundingClientRect(function (res) {

      consolelog(res)

      let size =reslength;

      let position = -1;

      let topshow = -1000;//根据需求设置大小

      let i=0;

      //根据 top  的 大小 获取 当前距离顶部最近的view 的下标， 负数最大值 或者是0，

      for(i=0;i<size;i++){0

        let top = res[i]top;

        if(top<=0 && top>topshow ){

          topshow = top;

          position=i;

        }

      }

      consolelog("当前坐标是 position = "+position)

      let isshow =false;

      if (res[0]top<0){

        if(position==-1) position=0;

          isshow = true;

      }

      thatsetData({

        isshow: isshow,

        toptexxt: isshowthatdatatestData[position]:""

      })

    })exec()

  },

})

<!--indexwxml-->

<view>

  <view class='header'>这里是header</view>

  <view hidden='{{!isshow}}'>

    <view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>

  </view>

  <view wx:for="{{testData}}" wx:key="{{testData}}">

    <view>

      <view class='section-cell' id='top{{item}}'>{{item}} </view>

      <view wx:for="{{testData2}}" wx:key="{{testData2}}">

        <view class='section-cell2' id='child{{item}}'>{{item}}</view>

      </view>

    </view>

  </view>

</view>

/indexwxss/

section-placeholder {

  background-color: white;

}

section-fixed {

  position: fixed;

  top: 0;

}

header {

  height: 300rpx;

  width: 750rpx;

  background-color: bisque;

}

section-header {

  height: 80rpx;

  width: 750rpx;

  background-color: rebeccapurple;

}

section-cell {

  width: 750rpx;

  height:80rpx;

  background-color: gold;

  margin-top: 2rpx;

}

section-cell2 {

  height: 50rpx;

  width: 750rpx;

  background-color: darkred;

}

效果

如果您的滚动屏小程序无法打开，可以尝试以下几种方法：

1 检查网络连接：确保您的手机已经连接到互联网，并且信号良好。

2 清除缓存和数据：进入手机设置-应用管理-找到滚动屏小程序并点击，选择清除缓存和数据。然后重新启动该小程序。

3 更新微信版本：如果您使用的是微信打开滚动屏小程序，请检查是否有新版本可供更新。在微信中点击“我”-“设置”-“关于”，查看当前版本是否为最新版。

4 重启手机：有时候只需要简单地重启一下手机就能解决问题。

5 卸载并重新安装：如果以上方法都没有效果，可以尝试卸载该小程序并重新下载安装。

如果上述方法仍然无法解决问题，建议联系相关技术支持或者寻求其他专业人士帮助处理。

微信小程序直播消息滑动，1打开微信，点击发现，找到小程序点击，进入小程序以后，在搜索框内输入手持d幕。

2进入小程序之后可以看到字幕的样式，选择中间滚动的字幕样式

3对边点击一处找到输入框，在输入框内输入你想显示的内容，点击右边的选项可以调节字幕内容的大小、颜色以及滚动速度等，然后保存到手机中就可以了。

在H5中，当把页面向上滑动时，可以发起ajax请求动态加载数据。在小程序中可以么实现么

目前在文档中，只看到有向下拉实现动态加载数据的组件

可以bindscrolltoupper是滚动到顶部/左边事件，bindscrolltolower滚动到底部/右边事件

利用"onPullDownRefresh"和"onReachBottom"方法

在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可;

以上就是关于微信小程序页面向上滚动隐藏顶部菜单全部的内容，包括:微信小程序页面向上滚动隐藏顶部菜单、微信小程序使用 onPageScroll 将view滚动置顶、小程序picker多列滚动使用注意事项等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！