微信小程序-账单页面月份悬浮替换

实现效果如图所示，废话不多说下拉看代码

1. 首先，在wxml文件中进行数据遍历渲染，并添加定位view（最为关键，如果不使用dom操作定位，会导致不同手机高度不同从而效果出现差异）

<view class="container">
    <!-- 悬浮窗内容 -->
    <view class="item_top suspension" wx:if="{{is_suspension}}">
        <picker mode="date" value="{{m.formattingDate(list[suspension_index].date)}}" end="{{nowDate}}" bindchange="changeDate" fields="month">
            <text>{{list[suspension_index].date}}</text>
            <text class="toDown"></text>
        </picker>
        <view class="item_total">已提现¥{{list[suspension_index].total}}元</view>
    </view>
    
    <!-- 列表内容 -->
    <view wx:for="{{list}}" wx:key="unique">
        <view class="item_top">
            <picker mode="date" value="{{m.formattingDate(item.date)}}" end="{{nowDate}}" bindchange="changeDate" fields="month">
                <text>{{item.date}}</text>
                <text class="toDown"></text>
            </picker>
            <view class="item_total">已提现¥{{item.total}}元</view>
        </view>
        <view class="item_content">
            <block wx:if="{{item.subList.length}}">
                <view class="subItem_box" wx:for="{{item.subList}}" wx:for-item="subItem" wx:key="unique" wx:for-index="subIndex">
                    <imageModule class="imageModule subItem_img" src="{{subItem.type == 1 ? wxPay : aliPay}}"></imageModule>
                    <view style="flex: 1">
                        <view>提现-到{{subItem.type == 1 ? '微信' : '支付宝'}}</view>
                        <view class="subItem_time">{{subItem.date}}</view>
                    </view>
                    <view class="subItem_info">
                        <view style="font-weight: bold;">{{subItem.number}}</view>
                        <view style="font-size: 28rpx;">申请中</view>
                    </view>
                </view>
            </block>
            <view class="tips" wx:else>暂无提现记录~</view>
        </view>
        
        <!-- 月份定位 -->
        <view id="item{{index}}"></view>
    </view>
</view>

2. 在onLoad进行处理，获取每个月份的高度并记录，监听页面滚动并计算

onLoad: function (options) {
    let list_height = []

	// list数组长度对应月份
    for (let i = 0; i < this.data.list.length; i++) {
        var query = wx.createSelectorQuery();
        query.select('#item' + i).boundingClientRect()
        query.exec(function(res){
        	// 获取月份定位view的高度
            list_height.push(res[0].top)
        })
    }

    this.setData({ list_height })
},

onPageScroll(e) {
    let { is_suspension, list_height, suspension_index } = this.data

    if (e.scrollTop > 55) {
    	// 是否显示悬浮，55为悬浮窗高度
        is_suspension = true
    } else {
        is_suspension = false
    }

    for (let i = 0; i < list_height.length; i++) {
        const itemPrev = list_height[i - 1] || 0;
        const item = list_height[i];

	// 判断滚动高度在当前月份模块底部与上一月份模块底部中间，则显示当前月份信息
        if (parseFloat(e.scrollTop) > parseFloat(itemPrev) && parseFloat(e.scrollTop) < parseFloat(item)) {
        	// 设置页面滚动对应月份内容范围，并在悬浮窗中显示相应月份数据
            suspension_index = i
            break
        }
    }

    this.setData({ is_suspension, suspension_index })
}