小程序bindtap传参_微信小程序bindtap

小程序bindtap传参_微信小程序bindtap一边开发一边做点笔记,东西可能零散了点,一边开发一边补充。1、事件 1.bindtap绑定点击事件 2.bindinput监听输入,没输入一个字符得到一次返回值(就算是输入中文时,没敲一次键依然返回一次)2、解决小程序tabBar跳转不能带参数问题小程序这里遇到了一个难题就是如果实现tabBar栏之间的跳转的话是不能传入参数的那么我们要如何解决这个问题呢! 我的办法就是让你的传…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

    1、bindtap 绑定点击事件

// wxml 代码:
<view class="type" bindtap='clickToDetail' id="{
  
  {item.id}}" data-title="西湖" data-place="杭州">
</view>
// js 代码:
clickToDetail: function(e){
    console.log(e.currentTarget)        // 通过console.log查看数据,获取需要的数据
    var title = e.currentTarget.dataset.title,
        place = e.currentTarget.dataset.place;
    wx.navigateTo({                     // 此处是页面跳转方法,这种方法仅限非 tabBar 页面,tabBar 页面用 wx.switchTab 方法
        url: '../detail/detail?title=' + title +'&place='+ place,
    })
}
// 在 detail 的 js 页面,在 onload 预加载周期函数中,可获得该参数:
onLoad: function (options) {
    console.log(JSON.stringify(options));        // 查看数据
    var title = options.title,
        place = options.place;
}

Jetbrains全家桶1年46,售后保障稳定

 

    2、bindinput 监听 input 输入框的输入 与 节流

// wxml 代码:
<input class='searchInput' value="{
  
  {keyWord}}" type="text" confirm-type="search" bindconfirm="searchIt" bindinput="inputValue"/>
// 这种写法 bindconfirm 绑定的函数在点击软键盘右下角回车键时,触发 searchIt 函数
// confirm-type="search" 写法,使右下角回车键显示为 ‘搜索’ 

js 代码:
// 实时监听输入框的 关键词,放到 data 中
  inputValue: function(e){
    var keyWord = e.detail.value;        // keyWord 为输入的值
    // 假设现在需要检测到用户输入的值,用户 400 毫秒内没有继续输入就将该值打印出来
    this.throttle(this.queryData, null, 400, keyWord);
  },
// 节流
  throttle: function(fn, context, delay, text) {
    clearTimeout(fn.timeoutId);
    fn.timeoutId = setTimeout(function () {
      fn.call(context, text);
    }, delay);
  },
// 想要执行的函数
    queryData: function(e){
        console.log(e)        // 此处打印出来的就是 用户输入的值
    }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/234489.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 矩阵的投影矩阵_正交投影矩阵的性质

    矩阵的投影矩阵_正交投影矩阵的性质线性代数基础知识(上)线性代数基础知识(下)广义逆矩阵投影矩阵投影的定义投影矩阵求法性质投影矩阵的应用从投影角度看广义逆从投影角度看最小二乘。。。投影的定义什么是投影?下图给出了投影的直观理解:如图是在R3R^3R3空间中,一条直线lll与一个平面α\alphaα相交,向量zzz是R3R^3R3中的一个向量。把lll看成是一束光(方向从上到下),光…

    2022年10月5日
    2
  • map和stack_创建一个MEAN Stack Google Map App(第一部分)

    map和stack_创建一个MEAN Stack Google Map App(第一部分)map和stack介绍(Introduction)”MEANAppswithGoogleMaps”(Atonguetwistertobetrue).“带有GoogleMaps的MEAN应用”(确实是绕口令)。Andyet,whetheryou’rebuildinganapplicationtovisualizebikelanesinyou…

    2022年5月29日
    44
  • PS制作CSS精灵图

    PS制作CSS精灵图精灵图简介1.精灵图(雪碧图)(1)问题:精灵图就是将很多的小图标合并到一张较大的图片中,那精灵是啥意思呢?(为此笑了一下午的我)。(2)精灵图也称雪碧图,由于大型网页首次加载需要时间,如果再加之加载小图标的时间,则会严重影响到用户体验。所以,考虑到在同一时间内,服务器拥堵的情况,使用精灵图来解决这一问题。那么怎么制作精灵图呢2.使用ps制作精灵图的详细步骤示例:将如下图图片中的四个图…

    2022年6月7日
    184
  • springEL表达式_Spring详解

    springEL表达式_Spring详解文章目录SpEL表达式SpEL表达式概述1、什么是SpEL表达式2、SpEL表达式的作用SpEL的使用方式1、xml配置的方式2、注解的方式SpEL表达式的调用SpEL表达式SpEL表达式概述1、什么是SpEL表达式SpEL:(springexpressionlanguage)是一种表达式语言,是一种强大,简洁的装配Bean的方式。他可以通过运行期间执行的表达式将值装配到我们的…

    2025年10月25日
    2
  • 如何进行业务需求分析论文_如何做需求分析

    如何进行业务需求分析论文_如何做需求分析首先,我们应该明确进行需求分析的目的。我认为,进行业务需求分析的直接目的就是为了进行信息系统的开发,所谓的需求,就是信息系统建设的需求。如果一个业务不需要信息系统就能有效开展,就不需要进行需求分析,直

    2022年8月1日
    6
  • SQL之视图与索引[通俗易懂]

    SQL之视图与索引[通俗易懂]SQL之视图与索引视图的定义、修改、使用索引的创建、查看视图人们在使用数据库时,并不是直接对数据源表进行操作,通常人们只关心源表的部分数据,因此为了使得用户在查询时方便,用不着在每次查询时都编写复杂的代码(比如连接等),可以事先将用户要使用的查询结果通过视图定义在数据库中,这样人们在进行查询时只需查看视图即可,简化了用户的操作,同时使得数据同源数据分离,提高了安全性。1.视图的创建语法:

    2022年7月22日
    10

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号