微信小程序 template添加点击事件绑定事件

2024-09-03 23:58

本文主要是介绍微信小程序 template添加点击事件绑定事件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

介绍

template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用。

简单使用

定义template

现在要创建一个template然后再index中使用。因为项目中可能会用到个多个template,所以最好新建一个文件夹来存放template相关的文件。注意这里的.wxml和.wxss文件是单独的创建,并不是创建Page或者Component. 如图:

aa

这里只做简单的演示,只显示一个view,myTemplate.wxml文件的代码如下:

<template name='selectView'><view class='tbgview' bindtap='clickView'>{{title}}</view>
</template>

可以看出template和普通的标签定义差不多,但是每个template必须为它设置name,因为在使用的时候可以是根据这个name的值来找到对应关系的。 

然后开始布局,myTemplate.wxss文件代码:

.tbgview{font-size: 30rpx;width: 80rpx;height: 60rpx;line-height: 60rpx;color: #000000;
}

使用template

经过上面几步template的定义工作就基本完成了,下面开始具体的使用,首先在需要使用template的文件中引入myTemplate.wxml文件,index.wxml文件的具体代码:

<import src="../template/myTemplate.wxml" /><view class='view'>
<!--和普通标签一样使用,is对应的是templates中的name  data是传入template值  --><template is='selectView' data="{{...Data}}"></template></view>

然后再index.wxss中引入template中用到的样式,即引用myTemplate.wxss:

@import "../template/myTemplate.wxss"

这样template中的view就可以显示了,但是我们看到templates.wxml中有一个点击事件 bindtap='clickView' ,那点击事件怎么处理呢?

1.如果你在index.wxml只调用一次template的话,很简单,我们只需要在index.js中添加一个名称为clickView的function即可:

  clickView: function(){console.log("我是template的点击方法")},

2.如果你在index.wxml多次调用template的话,1中的方法就会有缺陷,会导致多个组件只能共用一个事件。解决方法可以参考:https://blog.csdn.net/wangcheng_/article/details/79764584。

 

这篇关于微信小程序 template添加点击事件绑定事件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1134413

相关文章

基于@RequestParam注解之Spring MVC参数绑定的利器

《基于@RequestParam注解之SpringMVC参数绑定的利器》:本文主要介绍基于@RequestParam注解之SpringMVC参数绑定的利器,具有很好的参考价值,希望对大家有所帮助... 目录@RequestParam注解:Spring MVC参数绑定的利器什么是@RequestParam?@

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

spring @EventListener 事件与监听的示例详解

《spring@EventListener事件与监听的示例详解》本文介绍了自定义Spring事件和监听器的方法,包括如何发布事件、监听事件以及如何处理异步事件,通过示例代码和日志,展示了事件的顺序... 目录1、自定义Application Event2、自定义监听3、测试4、源代码5、其他5.1 顺序执行

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法:手动打包(将编译后的代码及JRE运行环境一起打包),使用第三方打包工具(如Launch4j)和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Python中的异步:async 和 await以及操作中的事件循环、回调和异常

《Python中的异步:async和await以及操作中的事件循环、回调和异常》在现代编程中,异步操作在处理I/O密集型任务时,可以显著提高程序的性能和响应速度,Python提供了asyn... 目录引言什么是异步操作?python 中的异步编程基础async 和 await 关键字asyncio 模块理论

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接