微信小程序页面传递循环列表数据

 时间:2026-02-12 12:33:54

1、打开开发者工具,在项目pages文件夹下,新建目录,在目录内新建mypage,并在app.json中将mypage设为第一页面

微信小程序页面传递循环列表数据

2、在mypage.wxml中写代码如下:

<view wx:for="{{datary}}" data-index="{{index}}" data-cont="{{item}}" class="item {{curItem==index?'focus':''}}" catchtap="itemtap">

{{index}}-{{item}}

</view>

微信小程序页面传递循环列表数据

3、在mypage.wxss中写代码如下:

.item{

 width: 100rpx;

 height: 100rpx;

 margin: 20rpx;

 background-color: rebeccapurple

}

.focus{

 background-color: red;

}

微信小程序页面传递循环列表数据

4、在mypage.js中添加数据如下:

 data: {

   datary:['hello','world'],

   curItem:0

 },

微信小程序页面传递循环列表数据

5、在mypage.js中为点击事件添加响应函数,代码如下:

 itemtap:function(e){

   console.log(e)

   var that = this;

   that.setData({curItem:e.target.dataset.index})

   wx.navigateTo({

     url: '../logs/logs?item='+e.target.dataset.cont,

   })

 }

微信小程序页面传递循环列表数据

6、在logs.wxml中添加代码如下:

<view>{{datavar}}</view>

微信小程序页面传递循环列表数据

7、在logs.js中添加数据接收传递过来的参数,在onload事件中显示数据,代码如下:

Page({

 data: {

   logs: [],

   datavar:null,

 },

 onLoad: function (options) {

   console.log(options)

   this.setData({

     

     datavar:options.item

   

   })

 }

})

微信小程序页面传递循环列表数据

8、点击编译,运行代码,在左侧模拟器,点击列表项,会跳转到logs页面,并成功传递了参数

微信小程序页面传递循环列表数据

  • PLSQL DEVELOPER用普通用户查看session出错
  • 怎么对电脑组策略进行备份操作
  • 报表组件FineReport中如何实现自动查询
  • dos打开百度网盘
  • 火狐浏览器怎么修改默认主页
  • 热门搜索
    劳动手抄报内容50字 手抄报的装饰 关于普通话的手抄报 民族大团结手抄报 溺水手抄报简单又漂亮 民族团结一家亲手抄报 网络安全手抄报简单漂亮 英雄手抄报简单一点 优秀手抄报 38妇女节手抄报图片