微信小程序 ，列表头滚动的过程中 view 悬浮在顶部

Posted 2023-03-13

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

//index.js

//获取应用实例

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)

    //console.log(e)

    let that = this

    let query = wx.createSelectorQuery()

    query.selectAll(".section-cell").boundingClientRect(function (res)

      console.log(res)

      let size =res.length;

      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;

       

     

      console.log("当前坐标是 position = "+position)

      let isshow =false;

      if (res[0].top<0)

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

          isshow = true;

     

      that.setData(

        isshow: isshow,

        toptexxt: isshow?that.data.testData[position]:""

      )

    ).exec()

  ,

)

<!--index.wxml-->

<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='topitem'>item </view>

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

        <view class='section-cell2' id='childitem'>item</view>

      </view>

    </view>

  </view>

</view>

/**index.wxss**/

.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;



图片效果