小程序模板传递信息-蒲公英云

小程序模板传递信息

<!-- 引入模板 -->
 <import src="../productList/productList.wxml"></import>
<!-- 模板传递数据 -->
<!-- <block wx:for="{ {listArr}}" wx:key="index" wx:for-item="obj"> <template is='productList' data="{ {obj}}"></template> </block> -->
 <!--或者 <template is='productList' data="{ {item}}"></template> 不需要加 wx:for-item="obj" -->
<!-- 展开对象 ...item 展开运算符 item={id:'',title:'',} 获取item.id item.title ...item=id:'',title:'' 获取 ：id,title -->
<block wx:for="{ {listArr}}" wx:key="index" >
  <template is='productList' data='{ {...item}}'></template>  
</block>

js:

data: { 
    listArr:[{ 
      id:1,
      imgUrl:'',
      title:'产品信息1'
    },
    { 
      id:2,
      imgUrl:'',
      title:'产品信息2'
    },
    { 
      id:3,
      imgUrl:'',
      title:'产品信息3'
    },
    { 
      id:4,
      imgUrl:'',
      title:'产品信息4'
    },
    { 
      id:5,
      imgUrl:'',
      title:'产品信息5'
    },
    { 
      id:6,
      imgUrl:'',
      title:'产品信息6'
    },
    { 
      id:7,
      imgUrl:'',
      title:'产品信息7'
    },
    { 
      id:8,
      imgUrl:'',
      title:'产品信息8'
    },
    { 
      id:9,
      imgUrl:'',
      title:'产品信息9'
    },
    { 
      id:10,
      imgUrl:'',
      title:'产品信息10'
    },
    { 
      id:11,
      imgUrl:'',
      title:'产品信息11'
    },
    { 
      id:12,
      imgUrl:'',
      title:'产品信息12'
    }, 
    { 
      id:13,
      imgUrl:'',
      title:'产品信息13'
    },
    { 
      id:14,
      imgUrl:'',
      title:'产品信息14'
    },
    { 
      id:15,
      imgUrl:'',
      title:'产品信息15'
    }]
  },

引入的页面：

<!--pages/productList/productList.wxml-->
<text>pages/productList/productList.wxml</text>
<!-- <template name="productList"> <view class="list"> <view class="img">图片{ {obj.id}}</view> <view class="text">{ {obj.title}}</view> </view> </template> -->
<template name="productList">
  <view class="list">
     <view class="img">图片{
   {id}}</view>
     <view class="text">{
   {title}}</view>
  </view>
</template>

css:

/* pages/productList/productList.wxss */
.list{ 
  display: flex;
  padding-bottom: 10rpx;
  border-bottom: 1rpx  solid  #eee; 
  margin-top: 20rpx;
}
.img{ 
  width: 240rpx;
  height: 240rpx;
  background: pink;
}
.text{ 
  flex: 1;
  padding-left: 30rpx;
}