小程序 循环遍历 传参数 获取参数的方法

//循环操作  block包裹着被循环的模板  

<block
  wx:for="{{post_content}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="index">
  <!-- {{...item}}展开这个对象 -->
  <!-- data-postId={{item.postId}}自定义属性 -->
  <view catchtap="onPostTap" data-postId="{{item.postId}}">
  <template is="itemTemplate" data="{{...item}}"/>
  </view>

  </block>

1.根据参数id获取具体详情页的数据

//直接把方法绑定到template上是不行的要在外层加一层view
//给方法传递id参数//展开循环项data="{{...item}"
<view catchtap="onPostTap" data-postId="{{item.postId}}">
  <template is="itemTemplate" data="{{...item}}"/>
  </view>
  

点击的时候传递id参数,然后跳转页面

 onPostTap:function(event){
     console.log("跳进详情页");
     var postId = event.currentTarget.dataset.postid;
     wx.navigateTo({
       url: ‘post-detail/post-detail?postId=‘ + postId,
     })
  },

原文地址:https://www.cnblogs.com/joer717/p/10601017.html

时间: 2024-10-07 07:49:20

小程序 循环遍历 传参数 获取参数的方法的相关文章

微信小程序-循环(遍历)的使用

在wxml中写入循环的对象: 然后在js文件中的data中添加对象的各属性值: 效果图: 原文地址:https://www.cnblogs.com/weixiaofantasy/p/10074228.html

小程序---&gt;小程序图片上传阿里OSS使用方法

小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到的问题及解决办法: 1.cryptojs,sha1js,hmacjs,base64js在哪下载及使用方法: 文件可以在阿里oss实例文档中找到. 在运用过程中如果是通过require引入的,会找不到引入的方法,原因是这些js文档没有模块导出,可以在原文件里找到其顶部全局对象,exports出来即可.

微信小程序怎么上传代码

很多企业商家做了微信小程序,都想自己独立的去操作后台,但大多企业商家都没有相关的技术人员,就上传代码都成了问题,以下微信小程序观察网请添加链接描述就和大家分享一下微信小程序怎么上传代码,希望对您有帮助! 第一步:登录微信公众号后台进行小程序基本信息设置操作第二步:设置小程序基本信息,包括名称.头像.介绍以及服务范围.第三步:填写完成之后,再打开你的微信小程序开发工具,点击上传功能,点击上传提示窗口中输入版本号和说明即可.第四步:上传完成之后,返回到微信公众号后台,点击[开发管理].第五步:拉到底

微信小程序之wx.navigateback往回携带参数

在微信小程序开发的过程当中  经常碰到一些带逻辑的一些事情 就比如 新增地址 修改地址  筛选用户条件等页面的时候  我们也可以用wx.navigateTo来跳转实现 但其中有很多问题 1.微信的十层跳转  当你用navigateTo跳转的时候跳转十次的时候就跳不动了 2.参数的传递 我们在用navigateTo跳转的时候通常带着参数来跳  试想一下 如果我们一种这么跳 那么携带的参数越来越多 这不是开发的一个好事情 所以在以上的问题上我们可以用navigateback来实现  既仅携带本次跳转

微信小程序实现城市定位:获取当前所在的国家城市信息

微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key). 然后在顶部菜单里

php小程序登录时解密getUserInfo获取openId和unionId等敏感信息

在获取之前先了解一下openId和unionId openId : 用户在当前小程序的唯一标识 unionId : 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的unionid是唯一的.换句话说,同一用户,对同一个微信开放平台下的不同应用,unionId是相同的.详情登录微信开放平台(open.weixin.qq.com) . 在微信小程序开发中,uni

小程序组件--&gt; 组件传参

小程序组件,在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件 如果多个地方需要使用到,可以在app.json中加入一下代码,相当于vue的全局组件. "usingComponents": { "btn": "/components/文件夹名/js文件名" } 如果单独引用,直接在引用的json文件中 "usingComponents": { "

小程序文件上传uploadFile

前台代码: bindPhoto(e) { var that = this; wx.chooseImage({ count: 1, sizeType: ['original','compressed'],// 指定原图或者压缩图 sourceType: ['album', 'camera'], // 指定图片来源 success: function (res) { var tempFilePaths = res.tempFilePaths; wx.uploadFile({ url: 'http:/

5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新的文字版本摘要. 此文为 「60 节实战课微信小程序开发视频教程」 的第 51 小节内容,如果需要查看视频版本的实战操作,请直接跳至文章的最后部分查看. 1.云开发图片空间简介 在之前的文章 微信小程序开发平台新功能「云开发」快速上手体验 中我们简要介绍了腾讯官方给所有的微信小程序开发提供的云