复制
收藏
提问
简洁
2个月前
<!-- 列表数据 --> 首页wxml <view class="box"> <block wx:for="{{dataList}}" wx:for-item="item"> <view class="level row" bindtap="toPerson" data-id="{{item.id}}"> <view class="right-info"> <view> <view class="right-title"> <text class="car-dot">{{item.label}}</text>{{item.title}} </view> </view> <view class="right-bot"> <view>{{item.brand}}</view> <view>{{item.date}}</view> </view> </view> <view class="left-img"> <image src="{{item.coverUrl}}"></image> </view> </view> </block> <view class="no-more">我是有底线的呦~</view> </view> 首页js dataList: [{ 'id':0, 'coverUrl': '/pages/img/列表2.jpg', 'label': '推荐', 'title': '山茶花香高山乌龙系列新品：寻香山茶、恋恋山茶、山茶君', 'date': '2023年1月23日', 'brand': '售价20元', }, { 'id':1, 'coverUrl': '/pages/img/列表3.jpg', 'label': '经典', 'title': '远山·鲜沏篇：桃花茉、云中绿、东美人', 'date': '2023年1月23日', 'brand': '售价18元', }, { 'id':2, 'coverUrl': '/pages/img/列表4.jpg', 'label': '新品', 'title': '霸王茶姬」春夏限时返场：桃花缘', 'date': '2023年1月23日', 'brand': '售价25元', }, { 'id':3, 'coverUrl': '/pages/img/列表5.jpg', 'label': '模板', 'title': '霸王茶姬上新两款夏日轻果茶', 'date': '2023年1月23日', 'brand': '售价20元', }, ] }, toPerson:function(event){ var currentID=event.currentTarget.dataset.id; console.log(currentID); wx.navigateTo({ url: '/pages/indextz/indextz?id='+currentID, }) },详情页wsml <view class="xw"> <view class="title">{{artical.title}}</view> <view class="right-bot"> <view>{{artical.brand}}</view> <view>{{artical.date}}</view> </view> <view class="poster"> <image src="{{artical.poster}}"></image> </view> <view class="con"> <text>{{artical.content}}</text> </view> </view> 详情页js // pages/indextz/indextz.js Page({ /** * 页面的初始数据 */ data: { artical:{ title: '原叶鲜奶茶·喝出真茶味', brand:'宣传部', date:'2024-08-12', poster: '/pages/img/简介.png', content: '霸王茶姬使用的有机茶品类均来自自有生态茶山直采，拒绝使用茶粉/茶渣。坚持从源头上严控出品质量，把茶做到骨子里，力图为茶友呈上一杯清爽不腻、喝的出真茶香的原叶鲜奶茶。' }, }, onLoad: function (options) { console.log(options.id); var id=options.id; var suc = this.data.personList[id]; this.setData({ name:suc.name, rename:suc.rename, special:suc.special, job:suc.job }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } }) 如何实现点击列表跳转不同页面
全网
文档
学术
百科
知识库
回答简洁模式
深入研究一些
在微信小程序中，实现点击列表项跳转到不同页面的功能，主要涉及到以下几个步骤：
-
定义数据：在首页的JavaScript文件中定义列表数据
dataList，每个列表项包含id、coverUrl、label、title、date和brand等属性。 -
绑定事件：在首页的WXML文件中，使用
bindtap事件绑定到列表项的点击事件，并在事件处理函数toPerson中获取当前点击项的id。 -
页面跳转：在
toPerson函数中，使用wx.navigateTo方法跳转到详情页，并传递当前点击项的id作为参数。 -
接收参数：在详情页的JavaScript文件中，通过
onLoad函数接收从首页传递过来的id参数。 -
设置数据：根据接收到的
id，从数据源中找到对应的详情数据，并使用setData方法更新详情页的数据。 -
显示数据：在详情页的WXML文件中，使用数据绑定的方式显示详情数据。
根据你提供的代码，以下是一些需要调整的地方：
-
在首页的
toPerson函数中，你需要根据currentID找到对应的数据项，然后将这个数据项传递给详情页。但是你的dataList中并没有包含personList，你需要将dataList中的数据项传递给详情页。 -
在详情页的
onLoad函数中，你需要根据传递过来的id参数，从首页传递的数据中找到对应的详情数据，并更新详情页的数据。
以下是调整后的代码示例：
首页JavaScript调整：
toPerson: function (event) {
var currentID = event.currentTarget.dataset.id;
var item = this.data.dataList.find(item => item.id === currentID);
console.log(item);
wx.navigateTo({
url: '/pages/indextz/indextz?id=' + currentID,
events: {
// 用于详情页接收数据
passData: function (e) {
console.log(e.detail);
}
},
success: function (res) {
// 向详情页传递数据
res.eventChannel.emit('passData', item);
}
});
},
详情页JavaScript调整：
Page({
data: {
artical: {}
},
onLoad: function (options) {
console.log(options.id);
this.setData({
artical: this.data.dataList[options.id] // 假设dataList是全局的，或者通过其他方式传递
});
},
// ... 其他生命周期函数
});
请注意，这里的dataList应该是一个全局变量或者通过某种方式传递给详情页的，否则this.data.dataList[options.id]将无法正常工作。你可能需要调整你的数据结构和传递方式以适应你的具体需求。
你觉得结果怎么样？