微信小程序点击按钮跳转到指定页面

最新推荐文章于 2024-07-26 14:47:54 发布

小YI在努力变强

最新推荐文章于 2024-07-26 14:47:54 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/yifangfeii/article/details/108851213

版权

这篇博客介绍了如何在微信小程序中创建一个仿微信通讯录的页面，当用户点击字母栏时，页面能自动滚动到对应姓名首字母的位置。通过解析WXML、WXSS和JS代码，详细展示了布局设计和事件处理函数`clickletter`的实现，帮助开发者理解如何在小程序中实现此类交互功能。

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

首先这是一个仿微信页面的通讯录列表：

当点击页面右侧的字母栏时，页面将跳转到相应字母的位置。

wxml代码如下：

<view class="fg">{
  {item.title}}</view>

<view class="box_1" wx:for="{
  {item.list}}">

  <view class="box1">

    <view class="tx">

      <image src="{
  {item.url}}"></image>

    </view>

    <view class="box2">

      <text class="mp">{
  {item.name}}</text>

    </view>

  </view>

</view>