小程序根据ID点击跳转到不同页面

1.在小程序里建立两个页面

2.在第一个页面wxml用display：flex弹性盒子写页面布局

<view style='display:flex;flex-wrap:wrap;'>
  <image wx:for="{{list}}" wx:key src='{{item.pic}}' bindtap='picChange' data-id='{{index}}' class="pic"></image>
</view>

3.在第一个页面.wxss写样式

/* pages/eg/eg.wxss */
/* 图片左间距40rpx */
.pic {
  width: 150rpx;
  height: 150rpx;
  margin-left: 40rpx;
  margin-top: 50rpx;
}

/* 选择器控制页面的宽度布局，每行4个图片，每行第一个图片距离左边15rpx */
.pic:nth-of-type(4n+1) {
  margin-left: 15rpx;
}
/* 1，2，3，4图片距离上边距10rpx */
.pic:nth-of-type(1), .pic:nth-of-type(2), .pic:nth-of-type(3),
.pic:nth-of-type(4) {
  margin-top: 10rpx;
}

4.在第一个页面js，写页面要显示的数据，以及点击事件传参过去

// pages/eg/eg.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 数组
    list: [
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b8d3a155a.jpg',
        title: '星空'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b7134812b.jpg',
        title: '花'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b8d3a155a.jpg',
        title: '星空'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b7134812b.jpg',
        title: '花'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b8d3a155a.jpg',
        title: '星空'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b7134812b.jpg',
        title: '花'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b8d3a155a.jpg',
        title: '星空'
      },
      {
        pic: 'http://pic1.win4000.com/wallpaper/2018-08-03/5b63b7134812b.jpg',
        title: '花'
      }

    ]
  },
//点击事件
  picChange: function (e) {
    var that = this
    // console.log(e)//打印数据
    console.log(e.currentTarget.dataset.id)//打印数据
    var id = e.currentTarget.dataset.id
    console.log(that.data.list)
    // console.log(that.data.list[id].pic)
    wx.navigateTo({
      url: '/pages/eg01/eg01?pic=' + that.data.list[id].pic + '&title=' + that.data.list[id].title,//传pic、pic两个参数到跳转新页面
      // success: function (res) { },
      // fail: function (res) { },
      // complete: function (res) { },
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    console.log(that.data.list[0].pic)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

5.在第二个页面wxml

<!--pages/eg01/eg01.wxml-->
<image src='{{pic}}'></image>

5.在第二个页面js，接收传参数据，并且显示到页面上

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pic:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    console.log(options)//打印数据
    // 获取传过来的数据
    that.setData({
      pic: options.pic,//options为页面路由过程中传递的pic参数
      title: options.title//options为页面路由过程中传递的title参数
    })
    wx.setNavigationBarTitle({
      title: that.data.title//页面标题为路由参数
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})