web前端全系列 教程
1839个小节阅读:2244.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
在微信小程序的项目中,同一个项目一般风格统一化,所以相同的页面效果也是常见的,此时模板的使用率就大大增多了。例如最常见的列表效果
xxxxxxxxxx
<template name="listTemplate" >
<view class="list">
<block wx:for="{{ foods }}" wx:for-item="item" wx:key="id">
<view class="item">
<image mode="widthFix" src="{{ item.pic }}"></image>
<text>{{ item.name }}</text>
</view>
</block>
</view>
</template>
x.list{
width: 100%;
}
.item{
margin: 10px;
}
.list image{
width: 100px;
}
xxxxxxxxxx
<import src="./lists/lists" />
<template is="listTemplate" data="{{ foods }}"></template>
xxxxxxxxxx
@import "./lists/lists.wxss";
xxxxxxxxxx
Page({
data: {
foods: [{
"id": 1,
"name": "美食-甜豆干",
"pic": "http://iwenwiki.com:3002/images/goods/1.jpg"
},
{
"id": 2,
"name": "好欢螺螺蛳粉300g*6袋",
"pic": "http://iwenwiki.com:3002/images/goods/2.jpg"
},
{
"id": 3,
"name": "良品铺子-肉松饼380gx2袋",
"pic": "http://iwenwiki.com:3002/images/goods/3.webp"
}
]
}
})