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

 更新时间: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
  })
 },

总结

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

相关文章

  • JavaScript使用setInterval()函数实现简单轮询操作的方法

    JavaScript使用setInterval()函数实现简单轮询操作的方法

    这篇文章主要介绍了JavaScript使用setInterval()函数实现简单轮询操作的方法,以实例形式分析了轮询操作的原理与javascript实现技巧,需要的朋友可以参考下
    2015-02-02
  • js toFixed()方法的重写实现精度的统一

    js toFixed()方法的重写实现精度的统一

    凡用过js 中的toFix() 方法的, 应该都知道这个方法存在一个小小的BUG,在IE 下和FF 下对于小数的进位有点不同
    2014-03-03
  • JavaScript学习笔记之数组随机排序

    JavaScript学习笔记之数组随机排序

    这篇文章主要介绍了JavaScript学习笔记之数组随机排序的相关资料,需要的朋友可以参考下
    2016-03-03
  • thinkphp标签实现bootsrtap轮播carousel实例代码

    thinkphp标签实现bootsrtap轮播carousel实例代码

    这篇文章给大家介绍thinkphp标签实现bootsrtap轮播carousel实例代码,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-02-02
  • JavaScript中Array的filter函数详解

    JavaScript中Array的filter函数详解

    这篇文章主要介绍了JavaScript中Array的filter函数详解,filter 为数组中的每个元素调用一次callback函数,W更多具体内容,需要的朋友可以参考一下
    2022-07-07
  • JavaScript的Number对象的toString()方法

    JavaScript的Number对象的toString()方法

    toString()方法可以把Number对象转换成字符串,并返回此字符串,本文给大家介绍JavaScript的Number对象的toString()方法,对javascript对象方法相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 详解使用uni-app开发微信小程序之登录模块

    详解使用uni-app开发微信小程序之登录模块

    这篇文章主要介绍了详解使用uni-app开发微信小程序之登录模块,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Javascript 字符串模板的简单实现

    Javascript 字符串模板的简单实现

    这篇文章给大家描述的是如何一步步简单的实现Javascript 字符串模板,对于初学javascript的菜鸟们来说应该是篇不错的文章,希望对大家能够有所帮助。
    2016-02-02
  • 纯JS代码实现隔行变色鼠标移入高亮

    纯JS代码实现隔行变色鼠标移入高亮

    这篇文章主要介绍了纯JS代码实现隔行变色鼠标移入高亮的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 你可能不知道的JSON.stringify()详解

    你可能不知道的JSON.stringify()详解

    老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢?是不是感到不可思议?下面这篇文章就来给大家介绍了一些你可能不知道的JSON.stringify的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-08-08

最新评论