微信小程序点击view动态添加样式过程解析


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

基本逻辑:

1.给每个view自定义dataIndex属性,从0开始

2.自定义一个名为selected的class,作为被选中后的样式

3.在wx.js中给viewId属性赋为0,用于默认显示。

4.给每个view添加一个点击事件select,在点击某个view时 将dataIndex变成这个view的自定义index

5.在view中添加一个三木运算符用于控制选中样式 {{dataIndex == 0 ? 'selected':''}}

附图:

wxml

<view class="ICONBOX {{viewId == 0 ? 'selected':''}} " bindtap="select" data-index= '0'>
   <view class="iconfont icon-haoping ic" ></view>好评
  </view>
  <view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'> 
   <view class="iconfont icon-zhongping ic"></view>中评
  </view>
  <view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
   <view class="iconfont icon-bottom-comment ic"></view>差评
  </view>

wxss

/* 表情盒子 */
 .ICONBOX{
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  /* flex-direction: */
  align-items: center;
  color: #999;
  font-size: 28rpx;
 }
 .ic{
  margin-right: 5rpx;
 }
 .selected{
  color: #f63
 }

wxjs

data: {
  
  viewId : 0
 },
select:function(e){
  this.setData({
   viewId: e.currentTarget.dataset.index
  })
 },

由于viewId初始值是0,所以会默认第一个切换了样式。

这样就完成了该事件:

微信小程序点击view动态添加样式过程解析

里面还有几个不足之处,时间仓促,暂且就这样写了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jquery移动节点实例
Jan 14 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 #Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 #Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 #Javascript
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 #Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 #Javascript
微信小程序图片自适应实现解析
Jan 21 #Javascript
You might like
php基础知识:控制结构
2006/12/13 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
详细解读Python中的__init__()方法
2015/05/02 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
python黑魔法之参数传递
2016/02/12 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python3 元组tuple入门基础
2020/02/09 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python turtle库的画笔控制说明
2020/06/28 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
道德之星事迹材料
2014/05/03 职场文书
教师节倡议书
2014/08/30 职场文书
行政处罚听证告知书
2015/07/01 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python