template在微信小程序应用
1、创建template
1、路径:\pages\template\cart
2、只有js,wxml,wxcss文件
1.1 wxml对应内容为:
<!--miniprogram/pages/template/cart/index.wxml-->
<template name="no-goods">
<view class="no-goods">
<view class="title-box">
购物车空空如也~
</view>
<view class="to-index-btn" bindtap="toIndexPage">
去逛逛
</view>
</view>
</template>
<template name="cart-goods-list">
<view class="line"></view>
<view class="items">
<block wx:for="{{goods}}" wx:key="index">
<view class="item">
<view class="icon">
<text>{{index+1}}</text>
</view>
<view class="text">
{{item.goodsname}}
</view>
<view class="order">
<view class="title">规格:{{item.goodspec}}</view>
<view class="desc">
<view>订货单位:{{item.qunit}}</view>
</view>
<view class="priceInfo">
<view class="price">¥{{item.price}} /{{item.unit}} * {{item.count}}</view>
<view class="count">{{item.total}}</view>
</view>
<view class="desc">{{item.pubdate}}</view>
</view>
<view class="buy">
<text>{{item.usrname}}</text>
</view>
</view>
<view class="line"></view>
</block>
<!--汇总统计信息-->
<view class="totalInof">
<view class="all">
<text>数量:{{count}}</text>
</view>
<view class="total">
总计:¥{{totalPrice}}元
</view>
</view>
</view>
</template>
1、需要使用 <template>标签
2、每个template标签需定义名称
1.2 wxcss 样式
/* miniprogram/pages/template/cart/index.wxss */
.container{
font-family: "Microsoft YaHei";
background-color: #F9F9F8;
justify-content:initial;
}
.title-box{
width: 100%;
padding-top: 110rpx;
text-align: center;
font-size:28rpx;
color:#999;
background: url(icon-cart.png) no-repeat center 205rpx;
background-size: 100rpx auto;
margin-bottom: 50rpx;
}
.to-index-btn{
color:#fff;
background:#e64340;
border-radius:6px;
width:300rpx;
height:70rpx;
line-height: 70rpx;
text-align: center;
font-size:28rpx;
}
.pick{
position: relative;
display: -webkit-flex;
display: flex;
width: 100%;
padding: 10px 15px;
font-size: 14px;
line-height: 24px;
color: #333;
background-color: #fff;
box-sizing: border-box;
}
.info{
background-color: #ffffff;
}
.line{
border:1px solid #cccccc;
opacity: 0.2;
}
.receive{
padding:10px;
}
.icon {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 50%;
text-align: center;
font-size: 20rpx;
padding: 2px;
position: relative;
left: 0;
top: 0;
color: #fff;
background-color: #ff0000;
}
.item{
display: flex;
flex-direction: row;
padding:10px;
align-items: center;
background: white;
}
.no-goods{
display: flex;
flex-direction: column;
padding:10px;
align-items: center;
background: white;
}
.order{
width:40%;
height:87px;
background: #cccccc;
}
.title{
font-size: 13px;
}
.desc{
display: flex;
flex-direction: row;
font-size: 13px;
color: #cccccc;
background: blue
}
.buy{
display: inline-flex;
align-content: center;
padding: 10px;
}
.text{
display: inline-flex;
width: 30%;
padding: 5px;
}
.desc view{
margin-right: 10px;
}
.priceInfo{
display: flex;
flex-direction: row;
margin-top:10px;
background: yellow
}
.price{
width:65%;
font-size: 13px;
color: #ff0000;
text-align: left;
}
.minus,.add{
border:1px solid #cccccc;
width:25px;
text-align: center;
}
.count{
border-bottom:1px solid #cccccc;
width:40px;
text-align: center;
}
.totalInof{
display: flex;
flex-direction: row;
height: 60px;
justify-content: space-between;
}
.all{
align-items: center;
padding-left: 10px;
width:50%;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.amount{
width:50%;
font-size: 16px;
text-align: right;
}
.total{
width:50%;
font-size: 16px;
color: #ff0000;
font-weight: bold;
text-align: center;
margin-top: 10px;
}
.opr{
position: absolute;
right: 0px;
width:92px;
background-color: #E4393C;
font-size: 15px;
font-weight: bold;
height: 60px;
line-height: 60px;
text-align: center;
color: #ffffff;
}
2 wxml模板应用
导入模板文件 <import src="../template/cart/index.wxml" />
<!--pages/buylist/buylist.wxml-->
<import src="../template/cart/index.wxml" />
<view class="container">
<view class="container">
<view class='pick'>
<text class='label'>活动主题:</text>
<text decode="true"> </text>
<picker mode="selector" range="{{titles}}" value="{{idex}}" bindchange="title_Selected">
<text class="input-value" style="color:red">{{titles[index]}}</text>
</picker>
</view>
<template is="{{goods.length > 0 ? 'cart-goods-list' : 'no-goods'}}" data="{{goods,count,totalPrice}}"></template>
</view>
</view>
3 往模板中传值
1、通过 is属性,判断使用哪个模板:
is="{{goods.length > 0 ? 'cart-goods-list' : 'no-goods'}}"
2、data="{{goods,count,totalPrice}}" 通过data 属性往模板中传值;
4 wxcss模板应用
@import "../template/cart/index.wxss";