<view class="list_wrap"><scroll-view class="list_scroll" scroll-with-animation bindscroll="handleScroll" scroll-y scroll-into-view="{{currentKey}}"><!-- 汽车首写字母 --><view wx:for="{{list}}"wx:key="{{index}}"class="list_title"id="{{item.key}}"><text class="bscroll_title">{{item.key}}</text><!-- 汽车名字 --><view wx:for="{{item.row}}"wx:key="{{index}}"wx:for-item="conItem"wx:for-index="i"class="listcon_box"><view class="image"><image src="{{conItem.img}}"/></view><text class="list_con">{{conItem.name}}</text></view></view><view class="bb"></view></scroll-view ><!-- 导航列表 --><view class="navList"><viewwx:for="{{list}}"wx:key="{{index}}"bindtap="handleNav"data-key="{{item.key}}">　　　　　　　　//判断如果滑动的下标==导航列表的下标？'active':''<text class="{{currentIndex==index?'active':''}}">{{item.key}}</text></view></view>
</view>

page{height: 100%;background: #eee;} //必须设置高度为100%
.list_wrap{height: 100%} //必须设置高度100%
.list_scroll{height: 100%} //必须设置高度100%
.listcon_box{width: 100%;height: 50px;background: #fff;display: flex;border-bottom: solid 1px #eee;}
.bscroll_title{padding-left: 10px;height: 40px;}
.image{flex: 1;display: flex;justify-content: center;align-items: center;}
.image image{width: 30px;height:30px;}
.list_con{flex: 9;padding-left: 10px;display: flex;align-items: center;}.active{color: cornflowerblue;}
.bb{height: 100%;}.navList{position: fixed;height: 100%;top:20px;right: 15px;}

// pages/list/list.js
Page({/*** 页面的初始数据*/data: {// 全部数据list:[],// 每天滚动列表的高度listItemTops:[],// 添加高亮currentIndex:0,// 点击navcurrentKey:"A"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.request({url: 'https://www.easy-mock.com/mock/5ceb8bac32cfe337f96fe748/example/car',success:(res)=>{console.log(res.data.data.items)this.setData({list:res.data.data.items},()=>{const query=wx.createSelectorQuery();query.selectAll('.list_title').boundingClientRect((res) => {// console.log(res)//可以获取到每条列表高度this.setData({listItemTops: res.map(item => item.top)})}).exec()})}})},// 列表滚动事件handleScroll(e){// console.log(e)let scrollTop = e.detail.scrollTop;let {listItemTops}=this.data　　//为了给导航栏添加样式　　//循环每个列表距离顶部的距离for (var i = 0; i < listItemTops.length-1;i++){　　　　//判断滚动页面的距离>=对应列表距离顶部的距离if(scrollTop>=listItemTops[i]){this.setData({currentIndex:i})}}},// 点击导航nav事件handleNav(e){console.log(e)let { key } = e.currentTarget.dataset　　 //设置这个currentKey是为了在页面scroll-into-view添加，只有加了这个点击导航时才会动this.setData({currentKey:key})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})