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

最新推荐文章于 2023-08-30 17:07:59 发布
最新推荐文章于 2023-08-30 17:07:59 发布
阅读量4.7k 收藏 23
点赞数 8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiehaiyanLI/article/details/107969381
版权
本文介绍微信小程序中实现点击标题高亮显示并切换到对应内容的方法。首先渲染标题，然后通过设置data-selIndex记录当前选中项。接着为每个标题按钮添加点击事件，传递index作为标识。在事件处理函数中，根据接收到的index更新视图，通过三目运算符控制高亮样式。
摘要由CSDN通过智能技术生成

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

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

在这里插入图片描述

  1. 把每个title点击后对应的内容渲染出来，这个时候是把所有的对应的内容渲染出来了，需要在data中定义一个selIndex当作当前点击的下标。在这里插入图片描述
 data: {
   
    typeList: [{
   
        id: 1,
        typename: '推荐',
        content: '我是推荐内容'
      },
      {
   
        id: 2
最低0.47元/天 解锁文章
勤奋的七仔
关注
  • 8
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发中的多页面切换与跳转
2401_85258012的博客
06-16 489
在other页面的onLoad函数中，我们通过getOpenerEventChannel方法来获取上一个页面的eventChannel对象，并通过on方法来监听事件，以获得传递的数据。在url参数中，可以通过?在本文中，我们将详细介绍微信小程序中多页面的切换和跳转的实现方式，并提供相关的代码案例。其中，传入的url参数为需要跳转的页面路径，可以使用相对路径或绝对路径，如果是相对路径，需要使用。当用户点击页面内的导航按钮时，会触发navigator组件的点击事件，通过url属性来指定需要切换的页面路径。
微信小程序——点击不同的标签，弹出显示不同的内容
Vevean2545116309的博客
04-11 2152
先展示效果图：（点击下面的小标签，弹出相应的内容） 思路：先给List所以数据绑定isactive:false，再通过点击事件，点击哪个，就把哪个的isactive设置为true，再用三元表达式item.isActive?'':'hidden'判断为真为假给标签加上样式 wx.js data: { subs:[ {list:'包',imagesrc:"/icon/bag.png",classify:'可循环物',isActive:false}, {list:'香蕉'
微信小程序 tab点击切换（不滑动）
m0_55546349的博客
04-14 1422
微信小程序 tab点击切换（不滑动） <!--pages/dingdan/dingdan.wxml--> <view class="body"> <view class="swiper-tab"> <view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="
一款简单，常用的切换（点击按钮，切换内容）
weixin_33962621的博客
09-02 244
1 <div class="list_shop"> 2 <p>保障期限 1年</p> 3 <ul class="shop_click"> 4 <li class="red">A款</li> 5 <li>B款</li>...
微信小程序解析富文本(支持代码高亮)
摸鱼程序员
03-10 1264
最近在边学边做小程序项目，需要解析数据库的文章HTML数据，一开始使用的是小程序内置的web-view，却遇到了报错。 在微信小程序的开放文档中查到 这对个人的开发者来说确实挺不友好的，在开放文档中查找web-view的时候还发现了另一个可以解析的组件rich-text 上手了之后遇到了几点问题。 解析<code></code> <pre></pr...
微信小程序———同一页面内左右滑动切换内容显示
qq_43852612的博客
08-30 3889
通过微信小程序实现手指触摸屏幕然后页面左右滑动。切换内容
【uniapp】微信小程序点击切换内容栏，切换tab的vue写法
ONLYSRY的博客
07-26 743
代码】微信小程序点击切换内容栏，切换tab的vue写法。
微信小程序 tab切换展示不同的内容
M_SSY的博客
02-21 4117
index.wxml &lt;view class='shopDetail-box'&gt; &lt;view class="tab-left" &gt; &lt;view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1" bindtap="tab"&gt;人
详解微信小程序Radio选中样式切换
08-30
微信小程序Radio选中样式切换 微信小程序Radio选中样式切换是微信小程序中的一种常见的交互效果，通过切换Radio选项的样式来达到用户交互的目的。在本篇文章中，我们将详细介绍微信小程序Radio选中样式切换的实现...
微信小程序源码_滑动选项卡.zip
最新发布
03-08
"滑动选项卡"是微信小程序中常见的一种交互设计，通常用于展示多个相关但内容不同的板块，用户可以通过左右滑动来切换不同选项卡，提升用户体验。 滑动选项卡在微信小程序中的实现涉及到以下几个关键知识点： 1. *...
微信小程序开发者工具v0.11 Win版
09-19
- **代码编辑器**：内置的代码编辑器支持语法高亮、智能提示，让编写WXML（微信小程序的结构层语言）和WXSS（样式表语言）更为便捷。 - **模拟器**：模拟真实手机环境，展示小程序在不同设备上的显示效果，支持...
微信小程序选项卡页面切换
01-31
微信小程序选项卡页面tabBar切换，现在贡献出代码，希望可以帮助到你们
微信小程序实现点击导航条切换页面
01-21
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码，供大家参考，具体内容如下 我录制了个gif如下，黄色部分是不可以滑动的，蓝色部分可以滑动。 代码解说： 首先我在js自定义了navState参数用于判断导航的当前状态， 定义了data-index用于js中动态修改导航的当前状态， nav-switch-style为选择导航条时的样式， 不可滑动视图切换很简单，用wx:if判断状态显示相应页就好了， 滑动页视图切换要用到swiper和 swiper-item， 用bindchang方法监听滑块，current 改变时会触发 change 事件（还有个bin
微信小程序实现购物页面左右联动
10-17
在微信小程序中实现购物页面的左右联动是一种常见的交互设计，它可以提供更好的用户体验，尤其是在展示商品分类和对应商品列表时。这种设计通常包含一个左侧的菜单栏，用于切换不同的商品分类，右侧则是根据所选分类...
微信小程序滑动选项卡.zip
06-14
7. **性能优化**：由于滑动选项卡可能包含多个内容区域，为了提高加载速度和性能，我们可以使用微信小程序的懒加载特性，只在选项卡被切换到时才加载相应的内容。 8. **适配不同设备**：考虑到微信小程序可能在不同...
微信小程序开发学习 第八天 点击按钮切换数据
然、的博客
05-08 892
步骤 1、进入页面加载数据： onLoad函数就是在加载页面时调用 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //页面加载时读取缓存存数据 let userInformation = wx.getStorageSync('userInformation') //将数据初始化 this.setData({ information: userInformation, }) }
微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
热门推荐
a_靖的博客
09-11 1万+
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： 先上效果图： 这里主要用到了swiper组件和三目运算，直接上代码， 样式只有三个class，简单粗暴，懒的小伙伴们可以直接拿来用，喜欢的点个支持 <view> <view class="swiper-tab"> <view cla...
小程序之点击跳转到对应内容
weixin_33766805的博客
05-31 1512
我在写页面的时候，遇到一个问题，点击不同的按钮，跳转到不同的区域，这个怎么 实现呢？一开始我用了计算的方式，推理出公式，按照ilphone6的标准，功能实现了。 我本来以为没有问题了，结果换了一个手机，变成了iPhone5，又不对了。因为在wxml中，设置的元素的具体尺寸不同设备有不同的换算比例，那么就不能用具体的公式定义， 后来，我研究了小程序组件scroll-view。发现如果用这个组件，...
【微信小程序实现tab栏切换渲染当前点击的数据】
CSDNwangjinwei的博客
07-21 498
1.通过获取当前点击的下标值将获取到的值传给要渲染的数据 2.当前点击的内容如果与获取到的数据值的相同则渲染该数据 3.要获取当前点击的下标值，第一次默认渲染第一个数据
微信小程序点击切换显示内容并高亮
05-05
你可以使用`hidden`和`wx:if`属性来实现点击切换显示内容并高亮的效果。 首先，你需要在wxml页面中定义两个不同的区域，分别用于显示隐藏的内容和高亮显示： ```html <!-- 显示内容的区域 --> <view wx:if="{{showContent}}" class="show-content"> <!-- 显示的内容 --> </view> <!-- 隐藏内容的区域 --> <view wx:if="{{!showContent}}" class="hide-content"> <!-- 隐藏的内容 --> </view> ``` 然后，在js文件中定义一个变量来控制显示内容的切换和高亮： ```js Page({ data: { showContent: true }, // 点击切换显示/隐藏内容 toggleContent: function() { this.setData({ showContent: !this.data.showContent }); } }) ``` 最后，你需要为切换按钮绑定一个`tap`事件，调用`toggleContent`方法来实现点击切换显示内容并高亮的效果： ```html <view class="toggle-button" bindtap="toggleContent"> 点击切换显示/隐藏 </view> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值