小程序使用模板

骑猪看日落 2023-01-12 14:55 182阅读 0赞

使用模板：

<import  src="../productList/productList.wxml"></import>
    
     
    <template  is='productList'>模板使用</template>
    <template  is='productList'></template>
    <template  is='productList'></template>
    <template  is='productList'></template>
    <template  is='productList'></template>
    <template  is='productList'></template>

本页面需要引进样式：  
/\* pages/about/about.wxss \*/

@import   '../productList/productList.wxss';

引进的页面：

<text>pages/productList/productList.wxml</text>
    <template  name="productList">
      <view class="list">
         <view class="img">图片</view>
         <view class="text">文字</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/5a1ac310ef1f4d03a6ca006b6d53b052.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序模板传递信息

<import src="../productList/productList.wxml"></import> <!--

╰+攻爆jí腚メ/ 2023年01月12日 14:57/ 0 赞/ 158 阅读

相关小程序使用模板

使用模板：  <import src="../productList/productList.wxml"></import>

骑猪看日落/ 2023年01月12日 14:55/ 0 赞/ 183 阅读

相关小程序小程序列表模板

小程序列表模板今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个放图！中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深

女爷i/ 2022年12月15日 02:19/ 0 赞/ 202 阅读

相关小程序中模板使用template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。创建 template.wxml ![SouthEast][] <!

╰半橙微兮°/ 2022年06月01日 04:07/ 0 赞/ 216 阅读

相关小程序模板-评分星星

概述我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类

谁借莪１个温暖的怀抱￠/ 2022年05月31日 11:17/ 0 赞/ 278 阅读

相关 1.微信小程序之模板使用

啦啦啦啦啦，今天来探讨一下模板的使用。 1.定义模板使用name属性，定义模板的名字，在<//template >内定义模板内容,在template.wxml

雨点打透心脏的1/2处/ 2022年05月09日 08:38/ 0 赞/ 138 阅读

相关小程序：模板与引用

准备工作：新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.

末蓝、/ 2022年04月25日 10:22/ 0 赞/ 268 阅读

相关微信小程序模板消息实现（PHP+小程序）

参考官方文档和部分资料，总结小程序模板消息推送以及相关注意事项，楼主踩过的坑，特来与大家分享。一、开发准备： 1. 在微信公众平台 - 小程序的模板中心申请消息模板 [

绝地灬酷狼/ 2021年11月22日 16:14/ 0 赞/ 462 阅读

相关小程序定义并使用模板template

1. 先说一下template和component的区别： template包含wxml和wxss，component包含wxml、wxss、js、json。从他们的结构就不

素颜马尾好姑娘i/ 2021年10月29日 09:24/ 0 赞/ 305 阅读

相关 wx小程序—— 小程序页面通用模板的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2021年07月25日 17:52/ 0 赞/ 505 阅读