vue列表滚动时，获取列表顶部的值

Question

如图，我目前想要实现的效果是：
当列表滚动时，获取滚动到的顶部的列表的数据中的时间，动态改变灰色部分的值

下面是我图中的两段代码，用了mui

<!-- 时间显示栏 -->
<div class="title_top">
    <p class="pl28 pt12">2017年09月</p>
</div>
<!-- 交易数据列表 -->
<div id="refreshContainer" class="mui-scroll-wrapper bgF" v-if="true">
    <div class="mui-scroll" v-cloak>
        <ul class="mui-table-view">
            <li  v-for="item in tradeRecord"  class="mui-table-view-cell trade-list-item" @tap="toDetails(item.type, item.status)">
                <div class="top flex-between">
                    <a class="blue">{{ item.type | typeName }} </a>
                    <span class="black">{{ item.apply_sum }}</span>
                </div>
                <div class="middel">
                    <p>{{ item.fundName }}</p>
                </div>
                <div class="bottom flex-between">
                    <span>{{ item.status | statusName }}</span>
                    <p>{{ item.apply_time }}</p>
                </div>
            </li>
        </ul>
    </div>
</div>

新手前端，对滚动方面的事件方法写得不多，希望能提供个大概的实现思路

Answer 1

给每个li加一个点击事件传index和item作为参数,然后在根据css 选择器刷选到第index个li，来改变显示li中时间的颜色，只是根据我想的提供个思路，可以试试