支付宝小程序--a:for写法，data-index获取当前index

最新推荐文章于 2025-01-21 15:48:25 发布

树旅小爷

最新推荐文章于 2025-01-21 15:48:25 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：小程序

本文链接：https://blog.csdn.net/milk_tiger/article/details/118570045

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了支付宝小程序中使用a:for进行数据循环的方法，讲解了如何通过data-index属性获取当前循环的索引。在AXML中结合js，利用data-index可以实现在用户点击时获取index并实现跳转到不同页面的功能。

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

-a:for 是要循环的数据，item是数据的每一项，index是序号从0开始
axml：

 <view class="approval">
    <view class="approval-item" a:for="{{content}}" onTap="to" data-index="{{index}}">
      <image mode="scaleToFill" src="{{item.url}}"/>
      <text>{{item.name}}</text>
    </view>
 </view>

js:

Page({
  data: {
    content: [
      {
       name: '人员审批',
        url: '../images/personApprover_2x.png',
        path: '/pages/personApproval/personApproval'
      },
       {
       name: '订单审批',
        url: '../images/orderApprover_2x.png',
        path: '#'
      },
       {
       name: '任务审核',
        url: '../images/taskApprover_2x.png',
        path: '#'
      
       }
    ]
  },
   to(e) {
    console.log(e);}