本文共 1936 字，大约阅读时间需要 6 分钟。

1.难点：怎么知道用户点击的是list中的哪一条数据？

方法一：在template外for循环里通过for循环的index获取

将index赋值到data-studentId，data-后面的变量名是不区分大小写的，获取值的时候只能用小写获取。

 控制台根据我点击打印出来的index:

方法二：在template里通过for循环的index获取（与方法一类似，只是catchtap和data-studentId属性的位置不同）

控制台根据我点击打印出来的index:

方法三：在js中手动添加index属性

 控制台根据我点击打印出来的index:

 2.目标：页面跳转获取index对应的数据详情

（1） 新建详情文件夹

（2） 页面跳转传参

（3） 获取参数和数据

（4） 渲染数据

 （5）运行结果

3.完整代码。templateStudy和student-item文件夹里的完整代码在“微信小程序（三）”中有，此处只展示studentDetail文件夹里的代码。

本地数据库：

var local_database = [  {    username:"小红",    classname:"三（8）班",    Sno:"777",    address:"武汉长江大桥",    tel:18162738765,    sex:"女"  },  {    username: "小名",    classname: "三（8）班",    Sno: "666",    address: "武汉长江二桥",    tel: 18162738765,    sex: "女"  },  {    username: "小花",    classname: "三（8）班",    Sno: "888",    address: "武汉黄鹤楼",    tel: 18162738765,    sex: "女"  },]module.exports = {  studentsList: local_database}

studentDetail.wxml

     
    姓名：{
  {studentData.username}}  
    班级：{
  {studentData.classname}}  
    学号：{
  {studentData.Sno}}  
    性别：{
  {studentData.sex}}  
    电话：{
  {studentData.tel}}  
    家庭住址：{
  {studentData.address}}
   

 studentDetail.wxss

.oneItem{  flex-direction: row;  display: flex;}

studentDetail.js

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

转载地址：http://hlssi.baihongyu.com/