美文网首页
微信小程序中template的使用案例

微信小程序中template的使用案例

作者: 崔菇凉T | 来源:发表于2019-03-20 15:32 被阅读0次

很多时候在我们做项目的时候会到很多布局和样式差不多的代码时 可以考虑使用 template 来减少冗余代码。
比如一下列表的布局样式，可以使用同一模板。


效果图

使用方法是如下：

  1. 在根目录下建一个新文件夹命名为 template；

2.在 template 下建相关模板文件.wxml和.wxss文件

template文件夹结构图

3.在模板文件/template/goods.wxml中设置模板的模板名name，在<template></template>中定义代码片段:

<template name='goods'>
    <view class='goods'>
        <image class='goods-hd' src='{{img}}' />
        <view class='goods-bd'>
            <view class='goods-bd_name'>{{goodsName}}</view>
            <view class='goods-bd_hot' wx:if='{{hot>100}}'>人气{{hot}}<image src='../../images/hot.png' /></view>
            <block wx:if="{{kinds}}">
                <view   class='goods-bd_kinds' >
                    <block wx:for='{{kinds}}'>
                        <view>{{item}}</view>
                    </block>
                </view>
             </block>
            <view class='goods-bd_sale' wx:if='{{sale>=0}}'>已售{{sale}}</view>
        </view>
    </view>
</template>

4.在模板样式文件/template/goods.wxss中定义模板样式

.goods {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    padding: 20rpx;
    margin-top: 10rpx;
    background: #fff;
    box-sizing: border-box;
}
.goods-hd {
    width: 180rpx;
    height: 180rpx;
    margin-right: 10rpx;
}
.goods-bd {
    position: relative;
    flex:1;
    -webkit-flex:1;
    padding: 10rpx;
}
.goods-bd_name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goods-bd_hot {
    color: #E9652D;
    font-size: 26rpx;
}
.goods-bd_hot>image {
    width: 23rpx;
    height: 23rpx;
    margin-left: 10rpx;
}
.goods-bd_kinds {
    display: flex;
    display: -webkit-flex;
    margin-top: 10rpx;
}
.goods-bd_kinds >view {
    padding-left: 10rpx;
    padding-right: 10rpx;
    margin-right: 20rpx;
    height: 42rpx;
    line-height: 42rpx;
    font-size: 22rpx;
    color: #888;
    border: 1rpx solid #bfbfbf;
    border-radius: 10rpx;
}
.goods-bd_sale {
    position: absolute;
    left: 10rpx;
    bottom: 10rpx;
    color: #888;
    font-size: 26rpx;
}

5.在需要使用该模板的页面引用模板文件，注意路径位置。使用 is 属性 对应已声明的模板name 使用该模板，然后将模板所需要的data传入（这里是用了ES6的扩展运算符，所以模板里面绑定的数据前面不需要 item）

<!--pages/goods/index.wxml-->
<import src="../../template/goods.wxml" />
<block wx:for="{{goodsArr}}">
<template is="goods" data="{{...item}}"></template>
</block>

6.在需要使用模板的样式文件中也引入对应模板的样式文件

/* pages/goods/index.wxss */
@import "../../template/goods.wxss";

7.这里为方便呈现效果，自定义了一些data数据：

// pages/goods/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        goodsArr:[
            {
                img: '/images/cat.jpeg',
                goodsName: '萌哒一只',
                sale: '980',
                hot: '999',
             },
             {
                 img: '/images/flower.jpeg',
                 goodsName: '鲜花',
                 sale: '1000',  
             },
            {
                img: '/images/tea.jpg',
                goodsName: '颗颗奶茶',
                sale: '99',
                kinds: ['美食甜品','娱乐消费']
            }
        ]
    },
})

相关文章