小程序中scroll-view组件实现效果之--------城市列表页的索引（scroll-into-view）

最新推荐文章于 2025-06-12 16:53:02 发布

kellywong

最新推荐文章于 2025-06-12 16:53:02 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端小程序 web

本文链接：https://blog.youkuaiyun.com/kellywong/article/details/83011876

想要实现的功能是在一个城市列表页实现字母索引
在这里插入图片描述
点击字母跳转到相应的位置，在小程序里面利用scroll-view特别简单

首先需要索引字母添加一个点击事件，捕获到点击的id

  <view wx:for ="{
  
  {searchLetter}}" wx:key="index" data-letter="{
  
  {item.name}}" catchtouchend="clickLetter">{
  
  {item.name}}</view>

然后给每个字母那行加上一个id="{ {outeritem.initial}}"，每次点击索引字母，把捕获到的data-letter="{ { item.name}}" 的值赋值给scroll-into-view="{ {scrollTopId}}" 中的scrollTopId，那么就会自动跳转到和scrollTopId相同的id那块区域

 <scroll-view scroll-y="true" style="height:{
  
  {winHeight}}px" bindscroll="bindScroll" scroll-into-view="{
  
  {scrollTopId}}" scroll-top="{
  
  {scrollTop}}">
 	 <view  wx:for="{
  
  {CityList}}" wx:key="{
  
  {item.initial}}" wx:for-item="outeritem">
            <vi