微信小程序实现循环列表中加样式

最新推荐文章于 2024-04-17 11:31:21 发布
最新推荐文章于 2024-04-17 11:31:21 发布
阅读量1.6k 收藏 1
点赞数 3
文章标签： 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34310906/article/details/77936049
版权

最近开始接触小程序，所以记录一下做项目过程中遇到的问题，由于小程序不想做网站开发，可以直接点击添加样式，得通过this.setdata来设置

这是效果图：

第一步：核心是判断当前点击的项的id，通过三目运算来判断当前是否应该添加激活类


第二步：

第一次写，文笔不好，叙述不清，望有缘看到这篇文章的兄台不喜勿喷大笑

皮卡皮卡~啾
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序实现循环列表功能
qq_38822390的博客
01-18 1792
写一个最常见的小demo，小程序简单循环列表数据渲染实例。 wxml <view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{index}}" class="item"> <view
基于微信小程序的推箱子小游戏
11-25
在微信小程序平台上实现这样的游戏，需要掌握一系列的IT知识，主要包括数据结构、算法以及微信小程序的开发技术。 1. **数据结构**： - **数组**：在游戏中，我们可以用二维数组来表示关卡地图，其中每个元素代表...
小程序开发——wx:for循环添加的元素怎么设置不同的样式
muzimiaomiaopeng的博客
08-21 1万+
在编写一个页面的时候，总会遇到一组出了文字内容其它都相同的组件，这时候如果使用循环是非常方便的，微信小程序也有自己的解决方案。 我们可以通过使用wx:for='{{items}}'进行组件的重复渲染，在js文件中设置items的值就可以实现。但是，在动态地设置每一项的样式的时候，出问题了。 我们想要实现如下图所示的效果： 点击一项，背景变白，字体为橙色。在web开发中，可以直接改变sty...
微信小程序中：使用三目运算设置样式
weixin_46001736的博客
05-05 1132
微信小程序中：使用三目运算设置样式
小程序商品列表页(列表、分类)（一键复制）
我们好像在哪见过
04-17 432
uniapp移动端的商品列表和商品分类页面，虽然这种页面样式已经烂大街了，但不可否认的是这样的页面布局依然很常见，所以为了避免重复写代码，在此记录，用到了就复制过去修改下细节，理论上应该可以节省一些时间
微信小程序 三元运算符 条件语句if和循环语句for（三目运算+hidden）
书写人生
05-12 1万+
在微信小程序的官方文档中，将这两个语句归化在框架的视图层，分表叫条件渲染和类表渲染，其实他就是封装了这两条语句而已。 上图（循环语句if）  1.它是通过在index.js中设置数据，然后再index.wxml中进行判断，首先上index.wxml的代码。 //微信是封装过if语句的，你只要在index.js中设置好值，然后就可以直接想这样拿来判断了，还有这是class=“vie
小程序开发总结日记（二）——三元运算符在微信小程序前端的具体应用（控制页面元素样式与显示）
weixin_45828020的博客
06-23 1974
说明：问号前为条件表达式，判断结果为型，为时执行表达式1，为时执行表达式2。作用近似于的逻辑运算。在小程序前端 wxml 文件，虽然也能使用if..else..来进行条件渲染（ wx:if ），但结构却稍显复杂，相比来说在理解原理后，使用三元运算符不仅代码简单，逻辑上也更显清晰，代码风格更优雅。（还有什么能比只写一行代码就能搞定一件事情更轻松惬意？
小程序通过三元运算符设置样式
qq_42529941的博客
11-20 665
公告
追书小说神器，微信小程序，内置API
05-04
1. **微信小程序开发**：微信小程序是腾讯公司推出的一种轻量级的应用开发平台，开发者可以通过微信提供的开发工具，使用JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）进行编程。本项目就是...
计算机专业词汇词典微信小程序
最新发布
05-21
在技术实现层面，小程序通常采用JavaScript进行逻辑处理，WXML（Weixin Markup Language）负责视图层的结构描述，而WXSS（Weixin Style Sheet）则用于定义样式。开发者需要熟悉这些技术，并结合微信小程序的框架进行...
C语言实现循环链表
08-18
C语言实现循环链表 本文主要介绍了C语言实现循环链表的知识点，包括循环链表的定义、创建、插入、删除和遍历操作。下面是对应的知识点： 1. 循环链表的定义：循环链表是一种特殊的链表结构，链表的最后一个结点的...
微信小程序-好看的页面
08-25
微信小程序，页面样式如图https://mp.csdn.net/postedit/82048790
微信小程序实现给循环列表添加点击样式实例
08-30
主要介绍了微信小程序实现给循环列表添加点击样式实例的相关资料,需要的朋友可以参考下
微信小程序样式weui.wxss
04-09
微信小程序样式表提供给大家。11111111111111111111111111111111111
链表-使用C语言实现循环链表.zip
03-13
本资源“链表-使用C语言实现循环链表.zip”将详细介绍如何用C语言来创建和操作循环链表。 首先，我们要理解循环链表的基本概念。循环链表是一种链表，其最后一个节点的指针不是NULL，而是指向链表的第一个节点，...
小程序给循环的列表点击添加样式
真真的博客
03-07 1440
<!-- 标签列表 --> <view class='list'> <block wx:for='{{biaoqian}}'> <view data-id='{{item.id}}' data-key='{{index}}' wx:for-index="index" class="{{item.status==0?'...
微信小程序--》条件与列表渲染以及WXSS模板样式
ztK63LrD的博客
08-02 2287
讲解WXML中 条件渲染 和 列表渲染 以及WXSS模板样式
微信小程序实现给循环列表添加点击样式
热门推荐
yonggeit的博客
04-15 2万+
微信小程序有个属性hover-class=’active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="tags"> <view class="tag-title">标签</view> <view class="tag-box"> <view wx:for="{
微信小程序列表切换样式简单案例
月落星河
01-07 5458
微信小程序切换列表颜色的转换 index.wxml： &lt;view class='style {{item.id==num?"active":""}}' catchtap='clickList' wx:for="{{message}}" wx:key="" data-num="{{item.id}}"&gt;{{item.text}}&lt;/view&gt; ind
微信小程序实现无感刷新token,接口缓存队列
07-12
对于微信小程序实现无感刷新 token，可以使用微信官方提供的登录态 code 和 session_key 实现。具体步骤如下： 1. 用户登录：用户首次登录小程序时，调用微信登录接口获取 code。 2. 获取 session_key 和 openid：使用 code 调用微信登录接口，获取 session_key 和 openid。 3. 生成 token：根据 session_key 和 openid 生成 token，并设置 token 的过期时间。 4. 返回 token：将生成的 token 返回给小程序前端，小程序前端保存 token。 5. 小程序每次请求接口时，在请求的 header 中携带 token。 6. 后端校验 token：后端接口在接收到请求时，验证 token 的有效性，如果过期则进行刷新。 接口缓存队列可以通过以下步骤实现： 1. 定义一个队列数据结构：可以使用数组或链表来实现一个队列。 2. 缓存接口请求：当用户请求一个接口时，将该请求加入到队列中。 3. 处理队列中的请求：后端定时任务或者其他方式定期处理队列中的请求。可以设置一个时间间隔，每隔一段时间处理队列中的请求。 4. 发送请求并返回结果：处理队列中的每个请求，调用相应的接口进行处理，并将处理结果返回给用户。 通过上述方式，可以实现微信小程序的无感刷新 token 和接口缓存队列功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值