微信小程序，字母索引滑动定位-仿通讯录

最新推荐文章于 2023-09-15 16:23:58 发布

柚子、、

最新推荐文章于 2023-09-15 16:23:58 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/ZZHK666/article/details/119575317

版权

本文介绍了如何在微信小程序中实现类似通讯录的字母索引滑动定位功能，通过展示相关的CSS样式代码，包括头部布局、当前城市显示、字母列表项等，帮助开发者创建一个易于导航的用户界面。

摘要由CSDN通过智能技术生成

废话不多说，直接贴代码。。。

<scroll-view scroll-y style="height: {
  {windowHeight}}" scroll-into-view="{
  {alpha}}">
  <view class="alphabet">
    <view id="Top" class="header">
      <view class="h-city">
        <text>北京</text>
      </view>
      <view class="h-close">
      </view>
    </view>
    <view class="now-city">
      <text>定位城市</text>
      <text class="now-city-name">北京</text>
    </view>
    <!-- 26个字母列表内容 -->
    <view class="alphabet-list">
      <view wx:for="{
  {list}}" wx:key="unique" id="{
  {item.alphabet}}" class="section-item" wx:if="{
  {index!=0}}">
        <view class="section-item-header">
          {
  {item.alphabet}}
        </view>
        <view wx:for="{
  {item.datas}}" wx:key="unique" wx:for-item="cell" wx:for-index="cellIndex" class="section-item-cells">
          <view class="section-item-cell {
  {cellIndex != (item.datas.length-1) ? 'border-bottom':''}}">
            <text>{
  {cell}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</scroll-view>