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

 更新时间:2018年07月17日 09:15:30   作者:onlineline  
这篇文章主要介绍了微信小程序实现默认第一个选中变色效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

效果图:

这里默认第一个选中 点击每个不会改变样式 根据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
  })
 },

总结

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

相关文章

  • 原生JS实现可拖拽登录框

    原生JS实现可拖拽登录框

    这篇文章主要为大家详细介绍了原生JS实现可拖拽登录框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • ECMAScript 基础知识

    ECMAScript 基础知识

    ECMAScript 基础知识...
    2007-06-06
  • javascript中this用法实例详解

    javascript中this用法实例详解

    这篇文章主要介绍了javascript中this用法,结合具体实例形式详细分析了javascript中this的含义及对象、函数等各种调用中的使用技巧,需要的朋友可以参考下
    2017-04-04
  • 用javascript实现页内搜索的脚本代码

    用javascript实现页内搜索的脚本代码

    用javascript实现页内搜索的脚本代码...
    2007-08-08
  • SWFObject Flash js调用类

    SWFObject Flash js调用类

    一直想为 SWFObject 这个JS的类库写一个推荐帖,因为他轻便,同时功能强大,为我们的开发带来了很大的便捷。
    2008-07-07
  • JavaScript实现模仿桌面窗口的方法

    JavaScript实现模仿桌面窗口的方法

    这篇文章主要介绍了JavaScript实现模仿桌面窗口的方法,可实现模仿桌面窗口的打开、关闭、移动、缩放及最大化、最小化等功能,需要的朋友可以参考下
    2015-07-07
  • JavaScript 语言的递归编程

    JavaScript 语言的递归编程

    关于递归的解释见《SICP》第1章。下面是个简单的递归编程题目。
    2010-05-05
  • js获取鼠标点击的位置实现思路及代码

    js获取鼠标点击的位置实现思路及代码

    常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,感兴趣的朋友可以了解本文
    2014-05-05
  • JavaScript前端巧妙实现数据实时更新详解

    JavaScript前端巧妙实现数据实时更新详解

    作为开发者,我们常面对复杂的开发环境,要应对即时通讯与数据实时更新的问题,那么该如何精准高效实现这些功能呢,下面小编就来和大家简单讲讲
    2025-03-03
  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理,ES6中引入了迭代器与可迭代对象的概念,并且提供了对可迭代对象的相关支持,如for...of循环,Map(iterable)构造器,展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06

最新评论