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