微信小程序点击高亮显示并切换到对应的内容

最新推荐文章于 2024-03-26 16:06:43 发布
最新推荐文章于 2024-03-26 16:06:43 发布
阅读量4.7k 收藏 23
点赞数 8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiehaiyanli/article/details/107969381
版权

点击高亮显示并切换到对应的内容具体实现方法：

  1. 先把头部要切换的标题渲染出来
    在这里插入图片描述

在这里插入图片描述

  1. 把每个title点击后对应的内容渲染出来，这个时候是把所有的对应的内容渲染出来了，需要在data中定义一个selIndex当作当前点击的下标。在这里插入图片描述
 data: {
   
    typeList: [{
   
        id: 1,
        typename: '推荐',
        content:
最低0.47元/天 解锁文章
勤奋的七仔
关注
  • 8
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程点击显示对应的内容
weixin_46504346的博客
06-21 1492
要实现微信小程序点击后显示对应的内容，可以使用wx:if和wx:else指令来控制显示或隐藏对应的内容。
微信小程序 tab切换展示不同的内容
M_SSY的博客
02-21 4093
index.wxml <view class='shopDetail-box'> <view class="tab-left" > <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1" bindtap="tab">人
微信小程序实现盒子点击高亮效果
最新发布
Wx001214的博客
03-26 297
- mark:test="test" 在调⽤组件时为事件处理函数传递参数。* 页面相关事件处理函数--监听用户下拉动作。//在调⽤组件时为事件处理函数传递参数。* 生命周期函数--监听页面初次渲染完成。-- 实现盒子点击高亮效果 -->* 生命周期函数--监听页面加载。* 生命周期函数--监听页面显示。* 生命周期函数--监听页面隐藏。* 生命周期函数--监听页面卸载。* 页面上拉触底事件的处理函数。在index.wxml中。在index.wxss中。在index.wxjs中。* 用户点击右上角分享。
微信小程序高亮
weixin_49295874的博客
09-23 308
xhtml <view wx:for='{{searchsuggestions}}' wx:key='index'> <rich-text nodes="{{item.keyword}}"></rich-text> </view> js let data = res.result.allMatch//搜索到的数据 data.map((item) =>{ item.keyword = item.keyword.replace(t
微信小程序导航栏 点击显示对应的内容代码
weixin_46504346的博客
06-07 437
导航栏目
【uniapp】微信小程序点击切换内容栏，切换tab的vue写法
ONLYSRY的博客
07-26 723
代码】微信小程序点击切换内容栏，切换tab的vue写法。
微信小程序——点击不同的标签，弹出显示不同的内容
Vevean2545116309的博客
04-11 2087
先展示效果图：（点击下面的小标签，弹出相应的内容） 思路：先给List所以数据绑定isactive:false，再通过点击事件，点击哪个，就把哪个的isactive设置为true，再用三元表达式item.isActive?'':'hidden'判断为真为假给标签加上样式 wx.js data: { subs:[ {list:'包',imagesrc:"/icon/bag.png",classify:'可循环物',isActive:false}, {list:'香蕉'
微信小程序点击列表跳转到对应详情页过程解析
10-16
主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序点击item使之滚动到屏幕中间位置
10-15
主要介绍了微信小程序点击item使之滚动到屏幕中间位置,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序点击滚动到指定位置的实现
10-15
主要介绍了微信小程序点击滚动到指定位置的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序实现点击导航条切换页面
01-21
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码，供大家参考，具体内容如下 我录制了个gif如下，黄色部分是不可以滑动的，蓝色部分可以滑动。 代码解说： 首先我在js自定义了navState参数用于...
异步下拉选择框
hoyche的博客
05-25 727
// 调用样例 // $('.all_filter .sup :text').ajaxDropSelect({ // url : '/ajax/ajaxBrandList', // type : 'post', // ablenum : 1, // callfn : function(op){}, // onfn : function(op){} // })...
小程序-基于vant的Picker组件实现省市区选择
u014678583的博客
08-17 4402
以高德gaode-area.json为例，点击就可以下载高德省市区数据（包含压缩和未压缩的）刚开始看文档这个结构一时没有理解，有点懵，后面经过研究发现需要如下结构。因为想减少小程序的体积，故把文件丢到服务器上了。
小程序如何实现tab切换，一部到位
热门推荐
程序员小陶的大数据分享
09-26 1万+
笔者之前尝试着其他教程：使用swiper来做切换。但是小程序中swiper存在很多限制，比如高度的限制，所以放弃了这种方案，本文将提供另一个方案。 小程序实现tab切换很简单，只需要完成两部分。 1.编写页面 2.编写js触发事件 先上效果图： 接下来介绍页面代码： 控制切换的Tab &lt;view class="swiper-tab"&gt; &lt;view class="sw...
小程序点击谁谁高亮显示
Joker_L_y的博客
04-03 902
template部分 //这是是通过事件委托给父元素一个点击事件,通过事件函数对象e.target来获取点击的是谁,这里需要给子元素设置自定义属性data-id="1"... <div class="con-nav" @click="changeColor"> <p data-id="1" class="{{isChecked==='1'?' active':'a...
mpvue 组件踩坑笔记 van-picker动态设置选中项
funny_girl的博客
04-22 4494
最近在弄vant-picker多列选择职业分类且联动的效果。 代码如下： <van-cell title="底部弹出" is-link @click="showBottom" /> <van-popup :show="bottom" position="bottom" custom-style="height: 80%" @close="h...
小程序点击列表当前项高亮显示
qq_44831135的博客
05-13 1026
效果图 注意: 如果说你想点击当前项任意地方都能实现高亮，你就要在当前项最外层的盒子设置点击事件，并用data-的方式传递所需要的参数 wxml: 1. 使用block是不想在外层多包一层view盒子，block和vue中template用法一样，不会再html结构中渲染 2. 用data-的方式传递当前id <block wx:for="{{list}}" wx:key="id" wx:for-item="item"> <view class="list-every {{curre
小程序picker-view默认显示某个值
webZRH的博客
07-25 7532
在value设置，切记在value设置 &lt;picker-view bindchange="bindintWeightChange" indicator-style="height: 50px;" style="width: 100%; height: 120px;" value="{{idxIntWeight}}" class="margin"&gt; &lt;pic
微信小程序 利用 hidden 实现点击tab导航栏，显示对应的内容栏目
qq_37172200的博客
03-22 1370
在微信小程序中，该功能会频繁用上，这次是利用微信小程序的 hidden 属性，通过 变量赋值 数据渲染 达到效果。 上效果图： 因为会频繁操作，所以用 hidden 比 wx-if 更好。 一般我们会用 block 生成许多块。 可以利用 数据绑定去 控制块的 hidden ，达到显示和隐藏的效果。 知识点： ishidden != index 意思就是显示与点击的tab的index的块。...
微信小程序点击切换高亮
05-05
要实现点击切换高亮的效果，可以使用以下步骤： 1. 给需要点击的元素绑定 tap 事件。 2. 在 tap 事件处理函数中，通过获取当前元素的 data-* 属性值，来判断当前元素是否已经被高亮。 3. 如果当前元素没有被高亮，就给它添加一个高亮的 class。如果当前元素已经被高亮，就把它的高亮 class 移除。 下面是一个简单的示例代码： wxml： ``` <view class="item" data-active="{{active}}" data-index="{{index}}" bindtap="onTap"> {{item}} </view> ``` css： ``` .item { height: 50px; line-height: 50px; text-align: center; background-color: #fff; border: 1px solid #ddd; } .item.active { background-color: #f00; color: #fff; } ``` js： ``` Page({ data: { list: ['item1', 'item2', 'item3'], activeIndex: -1 }, onTap: function(e) { var index = e.currentTarget.dataset.index; var active = e.currentTarget.dataset.active; if (!active) { this.setData({ activeIndex: index }); } else { this.setData({ activeIndex: -1 }); } } }) ``` 在上面的示例代码中，我们给每一个需要点击的元素设置了两个 data-* 属性，一个是 data-active 表示当前元素是否被高亮，另一个是 data-index 表示当前元素的索引。在 tap 事件处理函数中，我们先通过 e.currentTarget.dataset.index 获取当前元素的索引，然后再通过 e.currentTarget.dataset.active 判断当前元素是否已经被高亮。如果当前元素没有被高亮，就给它添加一个 active 的 class，否则就移除它的 active class。最后，我们使用 this.setData() 方法更新 activeIndex 的值，从而触发页面的重新渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值