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