优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

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

时间:2018-07-23 13:46:03 编辑:猪哥 来源:转载

效果图:

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

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

wxml:

页面class有三目运算


 
  {{item.num}}
 

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
  })
 },

文章评论

热门栏目

XML 地图 | Sitemap 地图