微信小程序（三）：使用template模板时无法获取for循环下标index的问题

使用template模板渲染的数据列表，点击后跳转到详情页，本想通过for循环中的index对应点击的是哪一条数据，后来发现template模板中无法获取index。

问题重现：【接微信小程序（二）的示例继续写】

运行结果：

后来查阅资料发现template中无法获取下标index，那如何获取呢？

方法一：for循环的下标index不能直接在template中获取，需要通过template的data属性传入template。这里只能以data="{{item:item,index:index}}"的格式，我试过data="{{...item,...index}}"和data="{{...item,index:index}}"都行不通。

运行结果：能成功获取index

方法二：在js中手动为每条数据添加一个index

运行结果：也能成功获取

方法二的完整代码:

templateStudy.wxml

<import src="../student-item/student-item-template.wxml" /><view class='container'><block wx:for="{{studentsList}}" wx:for-item="item" wx:for-index="index"><view class='list' catchtap="onStudentTap" data-studentId="{{item.studentId}}"><template is='studentTemplate' data="{{...item}}" /></view></block>
</view>

templateStudy.wxss

@import "../student-item/student-item-template.wxss";page{background-color: #f0f0f0;
}.container{margin: 20rpx;
}

templateStudy.js

var postsData = require('../../../data/students.js')Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {for (var idx in postsData.studentsList) {postsData.studentsList[idx].studentId = idx;}this.setData({studentsList: postsData.studentsList});console.log(this.data.studentsList);},onStudentTap: function (event){var idx = event.currentTarget.dataset.studentid;console.log(idx);wx.navigateTo({url: "../studentDetail/studentDetail?id=" + idx})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

student-item-template.wxml

<template name='studentTemplate'><view class='list-item'><view class='title'><label class='username'>{{username}}</label></view><view class='info'><label class='classes'>{{classname}}</label><label class='Sno'>学号：{{Sno}}</label></view></view>
</template>

student-item-template.wxss

.list-item{background-color: white;border-radius: 10rpx;
}.title{margin: 20rpx;line-height: 80rpx;flex-direction: row;display: flex;border-bottom: 1rpx solid #f0f0f0;
}.num{position: absolute;right: 50rpx;
}.info{margin: 20rpx;flex-direction: row;display: flex;line-height: 60rpx;font-size: 34rpx;
}.Sno{position: absolute;right: 50rpx;
}

微信小程序（三）：使用template模板时无法获取for循环下标index的问题相关推荐

微信小程序开发之——使用模板时如何区分点击的是哪一个
一概述一个页面中,使用模板创建两个按钮,分别点击两个按钮时,查看日志无法区分点击的是哪一个二按钮模板 2.1 模板布局文件(template-button.wxml) <template ...
微信小程序学习之Template模板开发
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用.使用 name 属性,作为模板的名字.然后在 <template/> 内定义代码片段,使用 is 属性 ...
python写微信小程序源码示例_python实现微信小程序用户登录、模板推送
python实现微信小程序用户登录.模板推送来源:中文源码网浏览: 次日期:2019年11月5日 [下载文档: python实现微信小程序用户登录.模板推送.txt ] (友情提示 ...
微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:
微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
微信小程序返回上一级页面时刷新页面
问题描述: 微信小程序返回上一级页面时需要重新加载一下数据问题解决: 方法一: 在需要返回的页面的onShow(){}方法中调用要刷新数据的方法方法二: goBack(){let pages = ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
QQ浏览器推小程序微信小程序三步完成接入
2019独角兽企业重金招聘Python工程师标准>>> 腾讯科技2018-12-05 11:29:14 摘要用户可以收藏关注常用小程序以便随时访问且避免了跳转繁琐,让QQ浏览器小程 ...

微信小程序（三）：使用template模板时无法获取for循环下标index的问题

微信小程序（三）：使用template模板时无法获取for循环下标index的问题相关推荐

最新文章

热门文章