微信小程序实现给循环列表添加点击样式实例
微信小程序实现给循环列表添加点击样式实例
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码:
wxml:
<view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <view wx:for="{{taga}}" wx:key="id" wx:for-index="i"> <view class="taga-item {{currentItem==item.id?'active-tag':''}}" data-id="{{item.id}}" bindtap="tagChoose">{{item.name}}</view> </view> </view> </view>
js文件:
tagChoose:function(options){ var that = this var id = options.currentTarget.dataset.id; console.log(id) //设置当前样式 that.setData({ 'currentItem':id }) }
核心点:class=”taga-item {{dateCurrent==item.id?'active-tag':”}}”模板文件中使用三元运算符,通过dateCurrent指定当前item的id
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序 循环及嵌套循环的使用总结
微信小程序 循环及嵌套循环的使用总结 关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难. 对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中: //首页话题列表 wx.request({ url: 'https://*******************', method: 'POST', data: { pageNum: 1, pageSize: 10 },
-
微信小程序之前台循环数据绑定
微信小程序之前台循环数据绑定 微信小程序的循环数据绑定到wxml例: wxml里: <view wx:for="{{array}}"> {{item.message}} </view> 通过上面的wx.for可以绑定一个数组,数组是json类型的:默认的索引序号是item,所以用{{item.message}} 显示数据js里: data: { array: [ { "message": "foot", "txt
-
微信小程序开发之animation循环动画实现的让云朵飘效果
本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所
-
微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu
-
微信小程序中页面FOR循环和嵌套循环
微信小程序中页面FOR循环和嵌套循环 单个循环 <view wx:for="{{pinpaiTishi}}" wx:key="{{xxx}}"> <view wx:if="{{item.name!=null}}" wx:key="{{xxxx}}"> //判断name是否为null <view class="tr"> <view class="td-lef
-
微信小程序获取循环元素id以及wx.login登录操作
微信小程序获取循环元素id以及wx.login登录操作 通过点击方法获取循环数据元素的id例: wxml里: <view id="list" wx:for="{{txt}}" > <text id="L_name">{{item.name}}</text> <text id="L_price">¥{{item.price}}/{{item.unit}}</text>
-
微信小程序实现给循环列表添加点击样式实例
微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie
-
微信小程序wx:for循环的实例详解
列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使
-
微信小程序使用for循环动态渲染页面操作示例
本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了 其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text
-
微信小程序云开发实现数据添加、查询和分页
本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,
-
微信小程序利用for循环解决内容变更问题
问题描述 学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这个问题吧. 解决方案 整体思路是创建一个数组,将页面内容写进数组,利用for循环来达到遍历数组的目的,从而实现利用数组的变量来改变页面的内容. 第一步:首先在 js页面在 data 中创建一个数组名为 sums ,并在数组当中添加内容. 代码示例: data: { sums:[{ imgone:"/pages/img/ 一人之下
-
微信小程序开发之好友列表字母列表跳转对应位置
微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc
-
微信小程序 滚动到某个位置添加class效果实现代码
微信小程序滚动到某个位置添加class效果 <scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrollY}}"> <view> 假设这里有
-
微信小程序实现无限滚动列表
本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下 效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:'true'. 话不所说,直接上代码: <!-- 底部排名 --> <view class='contentBottom'> <view class='BottomFirst'>
-
微信小程序个人中心的列表控件实现代码
个人中心的列表控件 首先来看效果图 wxml <view class="list-item"> <image class="item-image" src="../images/fuwu.png"></image> <text class="item-text">我的收藏</text> <image class="image-jiantou"
随机推荐
- jQuery实现浮动层随浏览器滚动条滚动的方法
- 浅谈angular2的http请求返回结果的subcribe注意事项
- EXTJS记事本 当CompositeField遇上RowEditor
- SVN使用教程_动力节点Java学院整理
- Java WebService 简单实例(附实例代码)
- 零基础写python爬虫之爬虫框架Scrapy安装配置
- 用asp实现的数据库中存取文件的代码
- 一个JSP页面导致的tomcat内存溢出的解决方法
- js 获取图像缩放后的实际宽高,位置等信息
- 密码知识教程二
- Java函数式编程(十一):遍历目录
- 通过表单的做为二进制文件上传request.totalbytes提取出上传的二级制数据
- Ruby教程之注释、变量声明以及数组操作
- jQuery使用addClass()方法给元素添加多个class样式
- Js智能判断浏览器是关闭还是刷新的代码
- JavaScript实现删除电脑的关机键
- Android实现类似360,QQ管家那样的悬浮窗
- java批量采集豌豆荚网站Android应用图标和包名
- RequireJS简易绘图程序开发
- PHP 程序员应该使用的10个组件