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