作为笔记,写一下小程序的详情页跳转,
News.js 数据页
Index 列表页
Succ 详情页
1,首先新建一个js文件,假设作为详情页的数据
news.js
var news=[
{
"id":1,
"name":'张三',
"age":'22'
},
{
"id": 2,
"name": "李四",
"age": '25'
},
{
"id": 3,
"name": '二狗',
"age": '28'
}
]
使用module.exports函数使接口暴露
module.exports={
news: news
}
2,在index.wxml文件中,做一个简易列表页,
<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> #这里我们就简易演示一下,只动态显示名字
<text>年龄</text>
</view>
</view>
</block>
block标签用来 for循环遍历数据
该view标签用来设置遍历后的点击动态 ,
data -* 是为组件设置任意的自定义属性值,在currentTarget.dataset中获取 ,方便我们获取遍历后的数据ID
Data-item 为数据内容,默认为是item,也可以不设
在 index.js 文件里配置一下
Index.js
var succes = require('../news/news.js') #导入js文件
Page({
data: {
Type:’’
},
onLoad: function () {
console.log(succes)
this.setData({
Type:succes.news
})
}
#点击动态,设置跳转页 传递数据
Biu:function(e){
Console.log(e.currentTarget.dataset.id) 打印一下点击事件的ID
Wx.navigateTo({
Url:’../succ/succ?id=’+e.currentTarget.dataset.id #这里跳转的时候把参数ID也传送一下
})
}
})
3,新建一个succ文件
succ.wxml
<view>
<view>{{name}}</view> #只是演示,就不花里胡哨的了,怎么简单怎么来吧。。
<view>你好</view>
</view>
succ.js
var succes = require('../news/news.js') #导入js文件
Page({
data: {
name:''
},
* 生命周期函数--监听页面加载
onLoad: function (opetios) {
console.log(opetios)
var suc = succes.news[opetios.id] #这里news是个数组,所以需要取值,
this.setData({
name:suc.name
})
}
})
原文链接:https://blog.csdn.net/max_1414/java/article/details/93903752