小程序使用模板

骑猪看日落 2023-01-12 14:55 204阅读 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 条评论，204人围观）

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

相关阅读

相关【小程序】WXML 模板

目录 WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 J

水深无声/ 2024年03月30日 11:08/ 0 赞/ 77 阅读

相关小程序声明需要使用的模板文件

<import src="../template/footer.wxml" /> <template is="

深碍√TFBOYSˉ_/ 2023年07月13日 13:53/ 0 赞/ 21 阅读

相关小程序模板传递信息

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

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

相关小程序使用模板

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

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

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

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

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

相关小程序中模板使用template

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

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

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

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

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

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

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

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

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

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

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

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

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

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