微信小程序循环商品列表以及如何向其他页面传参数

最新推荐文章于 2024-03-27 23:18:51 发布

缘飞梦

最新推荐文章于 2024-03-27 23:18:51 发布

阅读量4.5k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序循环商品列表微信小程序页面传参问题 wx:for

本文链接：https://blog.csdn.net/qq_37481512/article/details/87920925

版权

本文介绍了微信小程序中如何使用`wx:for`循环展示商品列表，并详细讲解了`wx:key`, `wx:for-index`和`wx:for-item`的用法。同时，通过设置`data-`属性和`bindtap`事件，结合`wx.navigateTo`实现页面间的参数传递。" 7819110,1076029,ZOJ 3627 模拟枚举问题解析,"['算法竞赛', '数学建模', '动态规划']

摘要由CSDN通过智能技术生成

商品列表是好多个商品，jquery中我们可以用for循环，或者$.each()来循环商品列表，可是小程序中应该怎么写呢？

其实很简单：

1、wx:for 是用来循环数组的,在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

<view class='shop_Box'>
  <view class='shopBox' wx:for='{
  {con}}' wx:key='{
  {index}}' wx:for-index="index" wx:for-item="con">
    <view class='shopImg'>
      <image src='{
  {con.image1}}' />
    </view>
    <view class='shopName'>{
  {con.shopName}}</view>
    <view class='shopMessage'>
      <view class='shops'>
        <text class='shopPrice'>￥{
  {con.price}}</text>
        <text class='markPrice'>￥{
  {con.markPrice}}</text>
      </vi