【微信小程序】小程序仿通讯录功能

本文介绍如何在微信小程序中实现仿通讯录功能,利用scroll-view标签和API获取元素高度,结合滚动距离动态判断选中字母,并通过scroll-into-view属性实现列表滚动。详细步骤包括WXML、WXSS布局及JS逻辑,旨在帮助开发者掌握这一功能的实现。
摘要由CSDN通过智能技术生成

微信小程序模仿通讯录功能需要用到scroll-view标签

思路:首先需要获取到你所需要展示的数据样式的高度(这就需要用到微信给我们提供的一个API来完成了,因为小程序是没有DOM树结构的,这个可以去看我的前一篇里面有详细的记载怎么获取想要的元素的宽高。),然后组合成一个高度数组(便于后面根据这个数组进行判断),再获取滚动距离,用这两个比较判断之后就可以得出滚动的时候右边选中的字母了,然后再利用scroll-view标签的scroll-into-view属性来实现点击右侧导航字母,对应的左侧列表滚动到相应的位置。(每个人的想法不同,解法和理解也不太可能相同。所以,按自己的心走就好了),话不多说,上代码!

wxml

<view>
  <!-- 左侧列表内容部分 -->
  <scroll-view class="content" enable-back-to-top scroll-into-view="{
  {toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">
    <view wx:for="{
  {listMain}}" wx:for-it
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上帝把我扔在人间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值