小程序模板传递信息

╰+攻爆jí腚メ 2023-01-12 14:57 159阅读 0赞

<import src="../productList/productList.wxml"></import>
    
    
     
    
    
    <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'
        }]
      },

引入的页面：

<text>pages/productList/productList.wxml</text>
    
    <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;
    }

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/4386390f79fe44ae974ddd9e4c70b671.png