微信小程序列表切换样式简单案例
微信小程序切换列表颜色的转换
index.wxml:
<view class='style {{item.id==num?"active":""}}' catchtap='clickList' wx:for="{{message}}" wx:key="" data-num="{{item.id}}">{{item.text}}</view>
index.wxss:
.style {width: 200rpx;height: 100rpx;
}
.active{color: red
}
index.js:
// pages/index/index.js
Page({/*** 页面的初始数据*/data: {num:1,message:[{id:'1',text:"今日头条"},{id: '2',text:'趣头条'},{id: '3',text: '百家号'},{id:'4',text: '企鹅号'},{id:'5',text:'大鱼号'}]},clickList:function(e){console.log(e)let num = e.target.dataset.numthis.setData({num:num})console.log(this) },/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
为你需要点击的列表加上点击事件,使用data-id将id传到点击事件中
然后将获取到的这个值传到num中setData到Data中,然后当item.id==num
那么就加上这个active类,如果不是就为空,默认的话讲data中的num:1
,默认的那一个就会被选中。
微信小程序列表切换样式简单案例相关推荐
- 第7课 微信小程序实现图片搜索器案例:
第7课 微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册 之后我们只需写ind ...
- navtab触底 小程序_微信小程序TAB切换效果
微信小程序tab切换效果 话不多说,先上效果图 主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页 然后是wxcss样式代码 .t ...
- 微信小程序canvas2d使用封装与案例使用
微信小程序canvas2d使用封装与案例使用,看一下这边封装效果 canvas2d文档:https://www.canvasapi.cn/ 下载地址:https://download.csdn.net ...
- 开发微信小程序,就是这么简单!可自动生成微信小程序源代码,配套JS SDK、接口和后台
开发微信小程序,就是这么简单!自己动手,丰衣足食! 开发微信小程序有多简单? 你只需要掌握前端开发,就可以轻松开发自己的微信小程序,实现自己的业务功能.借助果创云,无须域名.无须服务器.无须数据库, ...
- 视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
- 微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 《微信小程序:开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一 书中的第3章,第3.4节,作者李骏 边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
- uni-app微信小程序动态样式设置;微信小程序style行内式无效;微信小程序style行内式编译报错;微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
- php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下 今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
最新文章
- Tensor VS NumPy
- 开学综合症有救了!17篇最新AI论文不容错过
- ug导出step文件失败_解决UG导出CAD图纸失败的问题
- 26.Android Studio下Ndk开发(ffmpeg导入Android studio以cmake方式编译的过程)
- MachineLearning(12)- RNN-LSTM-tf.nn.rnn_cell
- 《你不常用的c#之二》:略谈GCHandle
- JVM垃圾回收,面试问到的都有了
- STM8学习笔记----普通IO口模拟串口功能
- sketch 将动图转换为json_UI设计师如何创建sketch设计样式、库和UI套件
- Flink SQL实时数仓开源UI平台
- Executors.newFixedThreadPool(NTHREADS)线程池数量设置多少合适?
- 详解阿里云第六代增强型实例,性能强劲,百万IOPS加持
- java注释规范_Java代码注释规范详解
- ApacheCN 活动汇总 2019.8.16
- centos 内网ip 设置_CentOS7 设置局域网固定IP
- [渝粤教育] 西南科技大学 英语(B)1 在线考试复习资料
- Linux shell爬虫实现树洞网鼓励师(自动回复Robot)
- http 阮一峰_JavaScript 标准参考教程(alpha) 阮一峰
- PMP证书可以办北京工作居住证的消息,别说你还不知道!
- MYSQL分区表如何保证数据唯一性
热门文章
- 异速联服务器虚拟打印怎么设置,金万维异速联6.2.2.0虚拟打印步骤.doc
- AD制作gerber文件详细步骤
- 一起来作画吧「GitHub 热点速览 v.22.14」
- 程序员试用期被裁,只给半个月赔偿
- 【iOS 15】iPhone如何录屏?iPhone屏幕录制技巧分享
- 使用TinyPNG的API进行图片压缩
- 电影院购票系统ssm (含论文)
- VS2017专业版和企业版激活密钥
- jeesit 可以用俩种导出
- Qt moc文件缺少“stdafx.h”异常