小程序-仿微信通讯录-字母导航

最新推荐文章于 2022-08-29 20:15:32 发布

原创

最新推荐文章于 2022-08-29 20:15:32 发布 · 3.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#微信微信小程序通讯录

本文介绍如何在微信小程序中实现类似微信通讯录的字母导航功能，包括数据结构设计、JS逻辑处理和CSS样式设置。示例中由于数据量大，仅展示了一部分以说明具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
由于数据都是写死的其中通讯录的列表太长就只放了一个说明数据结构
结构

<scroll-view scroll-y scroll-into-view="{
  
  {scroll}}" >
  <view class="con">
    <view class="con_list" id="{
  
  {con.title}}" wx:for="{
  
  {con_list}}" wx:key="" wx:for-item="con">
      <view class="title">{
  
  {con.title}}</view>
      <view class="list" wx:for="{
  
  {con.list}}" wx:key="" wx:for-item="list">
        <image src="{
  
  {list.img}}"></image>
        <view class="name">{
  
  {list.name}}</view>
      </view>  
    </view>
  </view>
</scroll-view>
<!-- 字母导航 -->
<view class="nav {
  
  {touchmove == 1?'touchmove':''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
  <view id="nav_item" wx:for="{
  
  {zimu_list}}" wx