微信小程序动态添加class,事件传参

最新推荐文章于 2024-06-04 22:19:30 发布

原创最新推荐文章于 2024-06-04 22:19:30 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

微信专栏收录该内容

34 篇文章

订阅专栏

data-参数名="值"

bind:tap="事件名称"

<view class="tab-item {{tabIndex=='1' ? 'active' : ''}}" data-tab="1" bind:tap="tabChange">点击</view>

tabChange(event){
    console.log('tabChange', event)
    let tabIndex = event.currentTarget.dataset.tab;
    this.setData({
      tabIndex
    })
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LLL_LH

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序开发：路由跳转以及传参的使用详情

全沾软贱开发攻城狮

04-15

1万+

微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。

【微信小程序】事件传参问题

汪小穆的博客

11-06

1969

前言：微信小程序跟vue.js有很多相似点，也有很多不同点。例如在事件传值上就有很大区别。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 动态绑定事件并实现事件修改样式

08-30

主要介绍了微信小程序 动态绑定事件并实现事件修改样式的相关资料,需要的朋友可以参考下

wxml修改样式_微信小程序动态绑定事件并实现事件修改样式

weixin_30586417的博客

02-22

315

微信小程序 动态绑定事件并实现事件修改样式发布于 2017-06-15 06:18:51 | 169 次阅读 | 评论: 0 | 来源: 网友投递小程序 微信小程序微信小程序(weixinxiaochengxu)，简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。这篇文章主要介绍了微信小程序 ...

微信小程序创建动态class（取下标控制和具体值控制class两种方式）

VueJiang的博客

05-23

3027

##1.创建动态class wxml : <view class="collectTypeBox flex">  <text class="flex {{collectType==0?'collectActive':''}}" bindtap="personalCollect" data-type="0">旅行</text>

微信小程序：动态控制class属性

会编程的林俊杰的博客

11-16

1万+

一、需求：点击一个选项，让其出现不同于其他选项的样式，比如选项文字的颜色变红。二、初步解决方案：可以设置一个活跃选项的数据来记录选中选项的下标（默认为0），其次选中其他选项时可以通过点击事件获取到所选选项的下标，并赋值给活跃选项。要点击的选项是 wx:for 循环出来的，所以接下来就是通过一个三元运算来判断每个循环的元素是否被选中，选中则加特殊样式。 js： cateActive:'0',//活跃选项下标 clickCate(e){ console.lo...

【微信小程序】事件绑定和事件对象

云泽野の编程日记

06-04

3265

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click事件也需要使用tap事件来进行代替bind:事件名bind事件名事件处理函数需要写到.js文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。

微信小程序 动态传参实例详解

08-30

微信小程序动态传参实例详解 微信小程序动态传参实例详解是微信小程序开发过程中经常会用到的功能。这种功能可以根据不同的页面传递参数，加载不同的新的页面。例如，在某一页点击不同的元素，进入不同的页面，加载...

微信小程序 页面之间传参实例详解

08-31

感谢阅读，希望这个实例详解能帮助你理解微信小程序页面间传参的基本用法。在实践中，不断尝试和优化，才能更好地掌握这一技能，为用户提供更顺畅的体验。如果你在开发过程中遇到其他问题，欢迎继续探索和学习，相信...

微信小程序class动态绑定

yangmin_kk的博客

04-30

6371

示例是除最后一条都加下划线并且除第一条给padding-top:10。(最外层要加上"[]"，不然不生效)示例是除最后一条都加下划线（微信小程序使用动态class前面不需要冒号）

【微信小程序】一文解忧，事件绑定

weixin_62542181的博客

07-10

4734

本文对微信小程序中的事件绑定进行讲解，包括事件基础知识，以及事件进阶知识，大白话讲起，实例演示

微信小程序中如何动态添加 class 属性

wbskb的博客

08-20

8954

如何在微信小程序动态添加 class 属性，如何在微信小程序组件中动态添加 class 属性

原生微信小程序使用class 三元运算符实现多选案例

肖帅的博客

08-12

2058

原生微信小程序使用class 三元运算符实现多选案例如下图所示： 1，在vue中开发非常容易实现，使用数组的includes方法判断即可，但是在原生小程序中不可以 2，要及时的对定义的遍历进行setData，重新赋值本案例的重点js代码如下： // res是从接口返回的数据 let xueliArr = res.data.data.xueli.list if(xueliArr && xueliArr.length > 0){ xueliArr.forEach

Web前端之微信小程序动态绑定Style与class

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

03-22

5803

Web前端之微信小程序动态绑定Style与class

微信小程序添加class

qq_39241421的博客

04-28

590

<view class="tabs_title {{item.isActive?'active':''}}" wx:for="{{tab}}" wx:key="id" >{{item.value}}</view>

微信小程序动态添加类名，切换class类名

weixin_41733299的博客

02-23

6078

微信小程序切换导航栏，因为微信小程序不能与jQuery一样用dom属性，例如addclass，removeclass这样的方法，就相对来说麻烦一点，可是有时候需要做切换导航栏这样的操作，参考代码如下： wxml： <view class="header-sort-nav"> <view bindtap="tapHan" class='sort-li {{_index==1?"nav-checked":""}}' data-index="1">招生通告</view&gt

微信小程序 动态绑定 style 样式和class

最新发布

06-18

### 微信小程序自定义 TabBar 传参方法教程在微信小程序中，自定义 TabBar 是一种灵活的方式来实现底部导航栏。为了向自定义 TabBar 传递参数，可以通过以下几种方式实现。 #### 方法一：通过全局变量 `getApp()` 传递参数在小程序的全局对象中存储需要传递的参数，然后在自定义 TabBar 中获取这些参数。这种方式适用于需要在多个页面或组件间共享的数据。 ```javascript // 在 app.js 中设置全局数据 App({ globalData: { tabParam: 'exampleValue' } }); // 在自定义 TabBar 的 index.js 中获取全局数据 const app = getApp(); Page({ data: { param: '' }, onLoad() { this.setData({ param: app.globalData.tabParam }); } }); ``` [^1] #### 方法二：通过 `props` 或事件绑定传递参数如果自定义 TabBar 是以组件的形式实现，可以通过组件的属性或事件绑定来传递参数。例如，在使用 TabBar 组件时，可以在父页面中设置组件的属性。 ```html  <custom-tab-bar param="exampleValue"></custom-tab-bar> ``` ```javascript // 自定义 TabBar 组件的 js 文件 Component({ properties: { param: { type: String, value: '' } }, attached() { console.log('接收到的参数:', this.properties.param); } }); ``` [^2] #### 方法三：通过路由跳转携带参数在切换 Tab 页面时，可以利用 `wx.navigateTo` 或 `wx.switchTab` 携带参数。需要注意的是，`wx.switchTab` 不支持直接携带参数，但可以通过全局变量或其他方式间接传递。 ```javascript // 路由跳转携带参数 wx.navigateTo({ url: '/pages/index/index?param=exampleValue' }); // 在目标页面接收参数 Page({ onLoad(options) { console.log('接收到的参数:', options.param); } }); ``` [^3] #### 方法四：通过 `data` 属性绑定动态参数如果需要在运行时动态更新 TabBar 的参数，可以通过父页面的数据绑定到 TabBar 组件上。 ```html  <custom-tab-bar param="{{dynamicParam}}"></custom-tab-bar> ``` ```javascript // 父页面 js 文件 Page({ data: { dynamicParam: 'initialValue' }, updateParam() { this.setData({ dynamicParam: 'updatedValue' }); } }); ``` ```javascript // 自定义 TabBar 组件 js 文件 Component({ properties: { param: { type: String, value: '' } }, observers: { 'param': function(newVal) { console.log('参数已更新为:', newVal); } } }); ``` [^4] #### 注意事项 - 自定义 TabBar 的性能体验可能低于原生 TabBar，因此在非必要情况下建议优先使用原生方案。 - 如果使用 `wx.switchTab`，由于其不支持直接携带参数，可以考虑通过全局变量或本地存储的方式间接传递参数。 - 在动态调整 TabBar 参数时，确保及时更新组件的状态，避免数据不同步的问题。 ### 示例代码以下是一个完整的自定义 TabBar 示例，展示了如何通过 `props` 和 `triggerEvent` 实现参数传递和交互。 ```javascript // 自定义 TabBar 组件 index.js Component({ properties: { activeIndex: { type: Number, value: 0 } }, methods: { switchTab(e) { const index = e.currentTarget.dataset.index; this.triggerEvent('tabChange', { index }); } } }); ``` ```html  <view class="tabbar"> <view class="tab-item" data-index="0" bindtap="switchTab">首页</view> <view class="tab-item" data-index="1" bindtap="switchTab">分类</view> <view class="tab-item" data-index="2" bindtap="switchTab">购物车</view> <view class="tab-item" data-index="3" bindtap="switchTab">我的</view> </view> ``` ```javascript // 父页面 js 文件 Page({ data: { activeIndex: 0 }, handleTabChange(e) { const { index } = e.detail; this.setData({ activeIndex: index }); wx.switchTab({ url: `/pages/tab${index + 1}/tab${index + 1}` }); } }); ``` ```html  <custom-tab-bar activeIndex="{{activeIndex}}" bindtabChange="handleTabChange"></custom-tab-bar> ``` [^5] ---