• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

转发:微信小程序-template模板使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

转载于CSDN--【向朔1992】处。(部分内容根据实际情况有所修改)

小程序实现主页面调用次级页面的wxml页面内容,如下图:

 

 

根据上图,我们可以将图片和图片信息作为一个goodsList.wxml 次页面,然后整个页面当做主页面home.wxml页;

模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板; 
2、新建一个courseList.wxml文件来定义模板; 
3、使用name属性,作为模板的名字。然后在<template/>内定义代码片段。

 下面是goodsList.wxml代码:区分左右两边的数据的是下面第二行的三元运算符

<template name="goodsList">
    <view class="goods-item{{index % 2 == 0?\' odd\':\'\'}}">
            <view class="goods">
                <view class="goods-tag ten" />
                <navigator url="../xiangqing/xiangqing">
                <image class="goods-image" src="{{goods.goods.imgUrl}}" />
                </navigator>
                <view class="desc-wrapper">
                    <view class="goods-desc">{{goods.goods.name}}</view>
                </view>
            </view>
            <view class="operating">
                <view class="tips">状态<span>{{goods.takeRate * 100}}%</span></view>
                <view class="progress" style="width: calc(100% - 76px);"></view>
                <view class="progress-take" style="width: calc((100% - 76px) * {{goods.takeRate}} );"></view>
                <view class="btn">加入清单</view>
            </view>
        </view>
</template>

二、使用模板

1、使用 <import scr=" "> 标签,在主页面引入需要使用的次级模板wxml

2、将模板所需要的 data 传入(这里的数据,我们在home.js文件中定义好),一般我们都会使用列表渲染。

<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
        <template is="goodsList" data="{{index:index,goods:item}}"/>
</block>

解释:1)首先引入次级模板文件,然后像普通的后台语言如php的模板引擎一样,wx:for也可以看成是一个模板引擎,wx:for就是解析数组,循环打印变量。

        2)is作用就是确认引用模板,item就是数组的当前变量,index就是数组元素的下标。

        3)上面的wx:for="{{goodsList}}",是js文件的多维数组数据,不是模板文件名,这里很重要。

        4)当然,你也可以这样写:

<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
        <template is="goodsList" data="{{...item}}"/>
</block>

data 是要模板渲染的数据,data="{{...item}}" 写法是ES6的写法,itemwx:for当前项,... 是展开运算符,在模板中不需要再{{item.goods}} 而是直接{{goods}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件,与CSS同样的写法控制样式。 
2、在需要使用模板的页面 .wxss文件中import进来;或者直接在app.wxss中引入,这样只需要一次引入,其他文件就不用引入了。

@import "../template/courseList.wxss";  

 

四、主页面home.wxml示例:

...
<view class="sort-panel" style="position:{{sortPanelPos}};top:{{sortPanelTop}}px">
        <view class="sort-item  comb on">人气</view>
        <view class="sort-item">最新</view>
        <view class="sort-item">进度</view>
        <view class="sort-item">
        </view>
    </view>
    <view class="goods-panel">
        <import src="tpl/goodsList.wxml"/>
        <block wx:for="{{goodsList}}">
        <template is="goodsList" data="{{index:index,goods:item}}"/>
        </block>
    </view>
...

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序模板渲染发布时间:2022-07-18
下一篇:
微信小程序--页面间传表单发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap