Implementing A-Z Contact List Sorting in WeChat Mini Programs

The article begins by introducing the WeChat Mini Program component for A-Z sorting, using the Car Brand list from 汽车之家 as an example.

It first shows the visual effect with a GIF demonstration.

Then it describes encapsulating the functionality into a reusable custom component named letterSortPicker , placed in a components folder.

The component configuration file index.json sets "component": true .

The layout file index.wxml uses a left scroll-view for the brand list and a right view for the alphabet index, binding touch events catchtouchstart , catchtouchmove , catchtouchend to handle letter selection and continuous touch.

It renders data via wx:for loops over cityList and letterList , displaying brand logos, names, and handling tap events.

The parent page passes data ( cityList , letterList ) and binds events like brandTap to the child component.

Touch handling methods clickRight , handlerMove , and clearLetterShow update the UI to show the selected letter, compute scroll position via scroll-into-view , and manage animation.

The scrollLeft method synchronizes scroll position with the alphabet index by comparing e.detail.scrollTop against pre‑computed heights.

Performance optimization sections advise reducing setData calls, controlling package size (code compression, CDN images, sub‑packages), optimizing asynchronous requests (early loading, caching, skeleton screens), and leveraging Mini Program component isolation.

The article concludes by summarizing the use of scroll-view , storage , globalData , and touch events to achieve the A‑Z contact‑list effect, and promises further code refinement and experience sharing.