微信小程序中的循环列表,怎么才能在点击时改变当前项的背景颜色

微信小程序循环出来的列表,怎么才能在点击时改变当前项的背景颜色,
改变当前选项颜色同时恢复之前被改变的颜色,保证同时只能有一个选项被改变颜色

0

1个回答

-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序中的循环列表,在点击时改变当前项的背景颜色
之前自己在网上找这个功能时,花了我大量的时间也没找到好一点的方法,于是我自己想出了一个解决方案,不知道其是否实用,反正先放出来,如果有不对的地方请指出。菜鸟一个,求带!废话不多说,我就直接上demo图:我们看到代码 我们先给我们的主界面设置两个区域块left_menu 和 right_content .left_menu: 我们通过wx:for 来遍历我们穿过来的数据。并给我们的view绑定一个
微信小程序选中背景色改变
可以用类似于:hover的伪类元素:active
微信小程序 循环列表后 点击按钮后返回改变颜色
wxml 代码 <navigator url="/pages/stockBacklog/stockBacklog" data-id="1" class="{{currentItem==1?'con_right_1':'con_right_11'}}" bindtap='bindCheck'>实时库存查询</navigator> js 代码 onLoad: fun...
微信小程序中for循环点击后的样式
分两种(主要是运用到了三元表达示) 一、在view中循环了个radio: wxml: <radio-group class="radio_group" bindchange="radioCheckedChange" name="answer1"> <view wx:for="{{item.detail}}" wx:key="{{id}}&quot
微信小程序循环列表添加默认事件,默认样式,点击后修改样式
第一个图:就是下拉抽屉层里面的一个列表数据展示。 wx:for="数据源",data-select="本列表选中的" class="三元表达式。  ds_service_select 默认赋值为空"如果当前 选中的值等于就是采用 current样式  反之为空   bind:tap  后台函数获取前台选中的 第二个图:后台返回的json里面第一项增加一项  主要就是 unshif 操作
微信小程序如何实现通过点击view改变背景颜色
转自 https://segmentfault.com/q/1010000007990656 小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如何改变page背景颜色: index.wxml <view class="page" style="background-color:{{pageB...
微信小程序中多个相同的组件点击时当前样式的改变
第一次用CSDN写博客,以前的是新浪博客,地址为:http://blog.sina.com.cn/99yt99 以后一直就用CSDN,新浪上面就不更新了。1、需要的东西  一张透明背景的图片:proper.png     2、效果展示  默认选中与样式改变的为“距离优先”,当然自己可以在ceshi.js中改变自己想默认的那个。通过点击切换改变样式)3、源码:wxml代码<view class...
【微信小程序】点击按钮修改背景颜色
【微信小程序】点击按钮修改背景颜色
微信小程序实现给循环列表添加点击样式实例
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml:<view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"&
微信小程序点击切换背景颜色按钮
一.wxml页面设计代码: <view class='top_view' style='color:{{pageBackgroundColor}}'>欢迎来到休闲游戏页面</view> <view class="clik_view" bindtap='ChangColor'>点击切换背景颜色</view>   二.js控制颜色的变化代码: ...
微信小程序点击获取页面循环列表的数据
最近接触了小程序,和以前的一些js的框架不一样的是,当页面绑定一个方法时,这里不会带参数,如下所示: <view class="page"> <view class="page__bd"> <view class="weui-grids"> <block wx:for="{{list}}&q
小程序 遍历点击修改当前的数据
需求:把当前点击的元素中select改为true 思路:遍历给所有的select为false,点击的时候获取当前元素的下标,把下标放入数组中, selectItem(e){//点击具体的白条分期 let index = e.currentTarget.dataset.index; let baitiao = this.data.baiti...
微信小程序——动态改变循环列表中的某一个元素样式
首先来看一下效果: 说一下思路:从后台传来的json,然后微信小程序端通过wx:for方法渲染出来,可以看到,一开始的按钮状态status都是灰色,(自定义0为灰色,1为彩色)。如果想要一次点击修改全部元素内容的话,那么对这些按钮设置一个status变量即可,通过改变按钮的status=1,按钮在循环队列中则会全部变为1。 如果想要达到顶部图片的效果。那么以下进入正题: 通过图片可以发现...
微信小程序点击移除添加class(点击改变背景颜色和字体颜色)
微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。 点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。 <!--页面--> <view class="info_choose "> <view class="catalog_name
小程序 动态改变循环 列表中的特定列数据
小程序中不能使用js动态的去改变前端页面的数据和元素,只能通过动态数据的型式来实现类似功能。 效果图: 不能用 $(this).html() 这样方便的方法去实现这样的效果,一时没有思路,结合之前做轮播图自适应的功能,想到可以用类似的做法,利用动态数据去实现。 代码部分: &amp;lt;view class='repaly-box'&amp;gt; &amp;lt;view class='reply-...
微信小程序实现给循环列表点击添加类(单项和多项)
在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一、单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个。 主要思路:给点击的view增加类,依靠点击的index对state进行赋值。如果相同时,给该view增加类。 实现代码: .wxml文件 1
微信小程序之收藏view背景色以及文字状态的改变
上代码 &amp;lt;view class=&quot;detail-shoucang&quot; style=&quot;background-color:{{BgColor}}&quot; bindtap='shoucang'&amp;gt;&amp;lt;text class=&quot;detail-shoucang.text&quot;&amp;gt;{{shoucang}}&amp;lt;/text&amp;gt;&amp;lt;/view&amp;gt; &amp;lt;/view&
微信小程序for循环之控制当前的列表项的样式
for循环的列表项里需要控制单个样式的地方加绑定id &amp;amp;lt;view class=&amp;quot;money inlineblock {{blue?'moneyn':'moneyt'}}&amp;quot; catchtap=&amp;quot;money&amp;quot; id='{{item.id}}'&amp;amp;gt; 数组这个样子写, list_search: [ { pic: '
怎么设置点击按钮改变小程序页面的背景颜色
wxml:&amp;lt;view class=&quot;container log-list&quot; style=&quot;background-color:{{pageBackgroundColor}}&quot;&amp;gt; &amp;lt;view&amp;gt; &amp;lt;view class=&quot;top-title&quot;&amp;gt;直销部日报标准: &amp;lt;/view&amp;gt; &amp;lt;!--日期选择 --&amp
微信小程序中,点击wx:for渲染的数据,view里的文字颜色改变、展示不同的内容
用wx:for渲染数据,不确定有多少条数据,要使得点击当前数据获取当前数据的下一级数据,描述可能会不太清楚,就是实现图中这种功能: wxml代码: &amp;amp;lt;!-- 这是要展示的规格 --&amp;amp;gt; &amp;amp;lt;view wx:for=&amp;quot;{{items}}&amp;quot; wx:key=&amp;quot;id&amp;quot; bindtap='selShopTc' data-index=&amp;quot;{{index}}&
按钮点击背景色变化、文字颜色变化
按钮点击背景色变化、文字颜色变化,代码里将的很详细啦,绝对没问题哦
小程序点击按钮for循环view加1,for循环内的下拉框选择互不影响
小程序使用for循环点击按钮 view+1,for循环内使用下拉框,互不影响,可单独选择。
微信小程序实现给循环列表添加点击样式
微信小程序有个属性hover-class=’active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="tags"> <view class="tag-title">标签</view> <view class="tag-box"> <view wx:for="{
【微信小程序教程】点击按钮修改view标签背景颜色
通过点击按钮动态修改view标签背景颜色
微信小程序WXML之列表渲染
这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构,在java或C中是用for关键字的,在微信小程序中也是for关键字,但是不同的是语法结构有点不同,下面我们介绍一下。 wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 下面我们来分析一下一个实
微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染 ...
一:for循环,绑定点击事件 分享者:larry6,原文地址  最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习。 先说一下此次项目本人体会较深的几个关键点:微信地图、用户静默授权、用户弹窗授权、微信充值等等。 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips: 想必大家的都知道wx:for,如
微信小程序如何改变循环里面的某个对象对应的标签的属性
关于这件事我遇到过两次。 先说第一次的解决方法。 第一次是我要根据后台传递的状态值来动态的改变用户是收藏了故事,还是没收藏故事的样式。 所以这个解决方法的前提条件是,后台有给你传递状态值。 直接代码来看。 ​ &amp;lt;i bindtap=&quot;change&quot; data-id=&quot;{{item.id}}&quot; class=&quot;fa fa-{{item.status==1?'star':'sta...
微信小程序---修改背景颜色和单个页面的背景颜色
1、给所有页面设置背景颜色在app.wxss里设置page{background-color:#f3f3f3;}2、给单个页面设置背景颜色在单个页面的.wxss里设置page{background-color:#dddddd;}page前面不需要加点...
如何实现v-for循环出来的列表里面的click事件只对当前列表内的元素有效
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/vue.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt;
小程序for循环出来的button,点击button的动画实现只对当前button有效
在做项目中发现在对for循环出来的button,添加点击事件的时候,所有button都会生效,那怎么实现只对当前的button有效呢?看下我实现的思路吧。有不明白的可以留言哈 wxml: &amp;amp;amp;amp;amp;lt;view wx:for=&amp;amp;amp;amp;quot;{{arr}}&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;button bindtouchsta
微信小程序设置导航背景色以及字体颜色API
调用方法是 wx.setNavigationBarColor({ frontColor:xxxxx, backgroundColor:xxx })
小程序navigator点击时不显示背景颜色
详情见官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=2017112 设置navigator属性 hover-class="none"时,没有点击态效果
微信小程序之携带for循环角标参数的点击事件
wx:for默认的列表下的角标是index ,data-index=&quot;{{index}}&quot; 这个属性为标记列表角标,有了它我们就能在事件中获取列表 item的角标&amp;lt;view bindtap='click' style=&quot;line-height:40px;&quot; wx:key='this' data-index='{{index}}' wx:for='{{locaInfo}}'&amp;gt;{{item...
微信小程序点击节点展开信息
由于小程序js限制没有列表,也无法通过id增删节点信息,故而只能通过一些其它的方法来实现。 需求:做一个详细信息展开的功能,即点击列表某一项时展开该项对应的详细信息 先上效果图:   实现思路: 怎么确保你点开的就是那一项,而不是其它的兄弟节点,被每一项的唯一性困扰了一下,思路在H5上一时间没转过来。 给每一项绑定唯一的值,点击此项时,获取的值为a,则展开值为a的这一项,关闭...
javascript实现列表中点击删除按钮删除当前项
在angular和vue等mv*框架中做的很多的一个案例就是添加列表再删除最具有代表性的案例就是todos点击打开链接,github地址点击打开链接点击当前列表项中某一项进行删除:下面代码以angular为例:视图层代码:&amp;lt;li ng-repeat=&quot;todo in data&quot;&amp;gt; &amp;lt;label&amp;gt;{{todo.text}}&amp;lt;/label&amp;gt; &amp;lt;button n...
异常处理——page背景颜色设置不显示
WeChat小程序交流(QQ群:769977169)微信小程序开发在app.json文件中设置了page的背景颜色,但没有效果,设置代码如下:&quot;window&quot;: { &quot;backgroundTextStyle&quot;: &quot;light&quot;, &quot;backgroundColor&quot;: &quot;#DCDCDC&quot;, &quot;navigationBarBackgroundColor&quot;: &quot;#
微信小程序怎么把前端for循环的index值让当前页的js获取到
前端页面有四个选项卡,绑定一个点击事件,然后把index的值绑定到data-id上,然后你点击哪一个就会获取哪一个的index的值,比如我点击了“参与会员”,那么就会获取到1 js通过点击获取到的下标进行选项卡的切换 test.wxml &amp;amp;lt;scroll-view class='scroll' scroll-x=&amp;quot;true&amp;quot; style=&amp;quot;width: 100%&amp;quot;&amp;amp;gt; &amp;a
微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染
一:for循环,绑定点击事件分享者:niedongdong,原文地址 最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习。先说一下此次项目本人体会较深的几个关键点:微信地图、用户静默授权、用户弹窗授权、微信充值等等。言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:想必大家的都知道wx:for,如下就不用我啰嗦了: cl
微信小程序给当前选中项添加选中样式
1、wxml &amp;lt;view wx:for=&quot;{{array}}&quot; wx:for-item=&quot;{{item}}&quot;&amp;gt; &amp;lt;view class='taskTitle {{showId == item.id ? &quot;active&quot; : &quot;&quot;}}' data-id=&quot;{{item.id}}&quot; bindtap='dealTap'&amp;gt;{{item.name}}&amp;
微信小程序之设置所有页面背景颜色
在app.wxss中使用 page{ background-color:#fff; height:100%; } 这里需要注意的是,page前面没有点。
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 小程序 开发教程 微信 微信小程序游戏开发教程