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

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文件中实现模板点击事件（如果需要的话）

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

微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
微信小程序-template模板使用
如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板一.定义模板 1.新建一个template文件夹 ...
小程序template模板为知你客服传入微信头像和昵称
小程序template模板为知你客服传入微信头像和昵称自从利用了知你客服以来,我们自己的小程序已经完全完成了服务内环化,即所有操作已经可以完全在微信内部完成,不必在使用qq联系客户,但在未配置 ...
微信小程序-WXML-template模板
微信小程序-WXML-template模板微信小程序中的模板,可以在其中定义代码片段,然后再不同的地方调用. 1.定义模板 name属性,取值为模板的名字 <tempalte name=&qu ...
php+实现群发微信模板消息_使用php实现微信小程序发送模板消息（附代码）
本篇文章给大家带来的内容是关于使用php实现微信小程序发送模板消息(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本章将会简单说一下微信小程序的模板消息发送,相对来说比较简 ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
商城模板_商城模板网站html5_微信小程序商城模板
分享一个商城模板平台,商城模板网站html5平台,微信小程序商城模板平台,这个平台可以提供超60+行业的商城模板. ☞商城模板平台另外给大家分享一下,在这个商城模板平台可以制作商城网站,电脑商城和微 ...
微信小程序发送模板消息踩的坑
在微信的微信小程序中,微信提供了和微信服务号相同的模板消息功能. 但是,虽然都是发送模板消息,小程序和服务号的模板消息的使用还是有差别的. 对于微信服务号的模板消息只要通过查看文档就能够知道我们使用模 ...

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

1.模板样式实现

2.调用模板

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

最新文章

热门文章

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

1.模板样式实现

2.调用模板

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

最新文章

热门文章

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

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