微信小程序详情页跳转

 

 

作为笔记，写一下小程序的详情页跳转，

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

 

好了，做到这一步，列表页跳转详情页就做好了，只是简单的操作，具体实现功能还需变通，这也当个笔记记录一下，哈哈哈哈，有没有大佬可以一起讨论一下的，