微信小程序点击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中cookie的使用详细分析
May 28 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
微信小程序实现留言功能
Oct 31 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
JavaScript实现简单动态表格
Dec 02 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中的boolean(布尔)类型详解
2013/10/28 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
什么是会话Bean
2015/05/14 面试题
自我评价200字分享
2013/12/17 职场文书
个人简历自我评价
2014/01/06 职场文书
社区包粽子活动方案
2014/01/21 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
基于angular实现树形二级表格
2021/10/16 Javascript
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript