作為筆記硫眨，寫一下小程序的詳情頁跳轉(zhuǎn)擎勘，
News.js 數(shù)據(jù)頁
Index 列表頁
Succ 詳情頁
1，首先新建一個(gè)js文件，假設(shè)作為詳情頁的數(shù)據(jù)
news.js
var news=[
{
"id":1,
"name":'張三',
"age":'22'
},
{
"id": 2,
"name": "李四",
"age": '25'
},
{
"id": 3,
"name": '二狗',
"age": '28'
}
]
使用module.exports函數(shù)使接口暴露
module.exports={
news: news
}
2，在index.wxml文件中妖泄，做一個(gè)簡(jiǎn)易列表頁，
<block class='title' wx:for="{{type}}" wx:key='this'>
<view class='titlebod' bindtap='biu' data-id='{{item.id}}' data-item =’item’>
<image src='../images/207488.jpg'></image> #用圖片搭襯一下艘策，顯得好看啦
<view class='text'>
<text>{{item.name}}</text> #這里我們就簡(jiǎn)易演示一下蹈胡，只動(dòng)態(tài)顯示名字
<text>年齡</text>
</view>
</view>
</block>
block標(biāo)簽用來 for循環(huán)遍歷數(shù)據(jù)
該view標(biāo)簽用來設(shè)置遍歷后的點(diǎn)擊動(dòng)態(tài) ，
data -* 是為組件設(shè)置任意的自定義屬性值朋蔫，在currentTarget.dataset中獲取 审残，方便我們獲取遍歷后的數(shù)據(jù)ID
Data-item 為數(shù)據(jù)內(nèi)容，默認(rèn)為是item斑举，也可以不設(shè)
在 index.js 文件里配置一下
Index.js
var succes = require('../news/news.js') #導(dǎo)入js文件
Page({
data: {
Type:’’
},
onLoad: function () {
console.log(succes)
this.setData({
Type:succes.news
})
}
#點(diǎn)擊動(dòng)態(tài)，設(shè)置跳轉(zhuǎn)頁 傳遞數(shù)據(jù)
Biu:function(e){
Console.log(e.currentTarget.dataset.id) 打印一下點(diǎn)擊事件的ID
Wx.navigateTo({
Url:’../succ/succ?id=’+e.currentTarget.dataset.id #這里跳轉(zhuǎn)的時(shí)候把參數(shù)ID也傳送一下
})
}
})
3病涨，新建一個(gè)succ文件
succ.wxml
<view>
<view>{{name}}</view> #只是演示富玷，就不花里胡哨的了，怎么簡(jiǎn)單怎么來吧既穆。赎懦。
<view>你好</view>
</view>
succ.js
var succes = require('../news/news.js') #導(dǎo)入js文件
Page({
data: {
name:''
},
* 生命周期函數(shù)--監(jiān)聽頁面加載
onLoad: function (opetios) {
console.log(opetios)
var suc = succes.news[opetios.id] #這里news是個(gè)數(shù)組，所以需要取值幻工，
this.setData({
name:suc.name
})
}
})
原文鏈接：https://blog.csdn.net/max_1414/java/article/details/93903752
