回顾 微信小程序template模板的使用 循环 赋值 点击事件

Posted 2023-01-06 锋少的技术博客

1.模板样式实现

在components目录下新建一个的wxml文件，eg：index.wxml

// 自定一个名为的customCard模板
<template name="customCard">
    //循环遍历传入的数据dataList
    <block wx:for="dataList">
    //绑定点击事件getDetail
        <view class="cardBox" data-id="item.id" bindtap="getDetail"  style="width: 696rpx;padding: 25rpx;margin: 15rpx 28rpx;box-shadow: 0 4px 8px 0 rgba(237, 237, 237, 0.2), 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.19);border-radius: 10rpx;">
            <image class="sampleImg" style="width: 100%; height: 250rpx;" src="item.cover_pic"></image>
            <view class="serviceTitle" style="font-size: 36rpx;margin-top: 10rpx;">item.name</view>
            <view class="bottomBox" style="height: 70rpx;margin-top: 10rpx;">
                <view class="servicePrice" style="display: inline; float: left; font-size: 36rpx;color: red; height: 36rpx;line-height: 56rpx;">item.price</view>
                <view class="serviceSubmit" style="display: inline; float: right; width: 160rpx; height: 70rpx;text-align: center; line-height: 70rpx; font-size: 30rpx;background-color: green;border-radius: 5rpx; color: white;">预约</view>
            </view>
        </view>
    </block>
</template>

2.调用模板

在要展示的页面使用模板

//在wxml中 引入以上模板对应的文件路径
<import src="/components/index"></import>
//使用模板，customCard是模板名字，dataList是传入的数据
<template is="customCard" data="dataList"></template>

//如果模板上绑定的点击事件
在调用模板页面对应的js文件实现即可
getDetail:function(e)
	console.log("当前模板的id=" + e.currentTarget.dataset.id)
,

总结
1.新建wxml文件实现模板样式
2.在要使用模板的wxml文件中引入模板页面路径
通过模板名字使用模板，可传数据到模板
3.在要使用模板的wxml文件对应的js文件中实现模板点击事件（如果需要的话）