<!-- 列表数据 --> 首页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() { } }) 如何实现点击列表跳转不同页面
理解问题<!-- 列表数据 --> 首页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() { } }) 如何实现点击列表跳转不同页面
已完成理解「<!-- 列表数据 --> 首页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() { } }) 如何实现点击列表跳转不同页面」
展开阅读网页