微信小程序（四）：通过list列表跳转详情页_在开发小程序项目中列表跳详情如何跳,用到什么方法

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

<view class='container'>
  <label class='oneItem'>姓名：{{studentData.username}}</label>
  <label class='oneItem'>班级：{{studentData.classname}}</label>
  <label class='oneItem'>学号：{{studentData.Sno}}</label>
  <label class='oneItem'>性别：{{studentData.sex}}</label>
  <label class='oneItem'>电话：{{studentData.tel}}</label>
  <label class='oneItem'>家庭住址：{{studentData.address}}</label>
</view>

 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 () {
    
  }
})