微信小程序实现默认第一个选中变色效果


Posted in Javascript onJuly 17, 2018

效果图:

微信小程序实现默认第一个选中变色效果

这里默认第一个选中 点击每个不会改变样式 根据index来实现

wxml:

页面class有三目运算

<view class='box'>
 <view class='box-container' wx:for="{{list}}" wx:key="list">
  <view class="{{index==idx?'_left':'left'}}" bindtap='goIndex' data-index="{{index}}">{{item.num}}</view>
 </view>
</view>

wxss:

_left 蓝色 left 黑色

.box{
 width: 100%;
 height: auto;
 border-top: 1px solid #efefef;
}
.box-container{
 width:90;
 display: flex;
 height: 100rpx;
 align-items: center;
 border-bottom: 1px solid #efefef;
}
.left{
 margin-left: 40rpx;
 font-size: 26rpx;
}
._left{
 margin-left: 40rpx;
 font-size: 26rpx;
 color: #14a1fd;
}

js: 定义一个idx:0 默认为0 拿到每个index

/**
  * 页面的初始数据
  */
 data: {
  list:[
   {'num':'我是第一个'},
   { 'num': '我是第二个' },
   { 'num': '我是第三个' },
   { 'num': '我是第四个' },
   { 'num': '我是第五个' },
   {'num':'我是第六个'},
   { 'num': '我是第七个' },
   { 'num': '我是第八个' },
   { 'num': '我是第九个' },
   { 'num': '我是第十个' }  
  ],
  idx : 0
 },
 goIndex (e) {
  let index = e.currentTarget.dataset.index; 
  // console.log('每个index',index)
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },

想要实现点击变色的话

如图:

微信小程序实现默认第一个选中变色效果

点击第二个 第二个变蓝色 其余变黑色

点击第三个 第三个变蓝色 其余变黑色... 只需要给idx赋值即可

goIndex (e) {
  let index = e.currentTarget.dataset.index; 
  // console.log('每个index',index)
  this.setData({
   idx: index
  })
 },

总结

以上所述是小编给大家介绍的微信小程序实现默认第一个选中变色效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue2.X 通过AJAX动态更新数据
Jul 17 #Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 #Javascript
微信小程序实现循环动画效果
Jul 16 #Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 #Javascript
Vue实现自定义下拉菜单功能
Jul 16 #Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
You might like
PHP session有效期问题
2009/04/26 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
Python实现合并字典的方法
2015/07/07 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Django 视图层(view)的使用
2018/11/09 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
python 通过exifread读取照片信息
2020/12/24 Python
Python实现石头剪刀布游戏
2021/01/20 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
大学生年度自我鉴定
2013/10/31 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
先进个人获奖感言
2014/01/24 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
运动会演讲稿
2014/05/07 职场文书
六年级情感作文之500字
2019/10/23 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技