微信小程序 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

相关文章

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

基于@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