微信小程序实现默认第一个选中变色效果 - 行业资讯 - 肥雀云

效果图:

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

wxml:

页面类有三目运算

　　　　　　& lt;视图类=昂凶印痹? 　　& lt;视图类=昂凶印钡奶炱?为=皗{列表}}”天气:关键=傲斜怼北? 　　& lt;视图类="{{指数==idx # 63;“_left”:“左派”}}“bindtap=癵oIndex”材料指数="{{指数}}在{{item.num}} & lt;/view> 　　& lt;/view> 　　& lt;/view> 　　　　

wxs:

_left蓝色离开了黑色

　　　　　　.box { 　　宽度:100%; 　　高度:汽车; 　　border-top: 1 px固体# efefef; 　　} 　　.box-container { 　　宽度:90; 　　显示:flex; 　　身高:100 rpx; 　　对齐项目:中心; 　　边界底部:1 px固体# efefef; 　　} 　　.left { 　　margin-left: 40 rpx; 　　字体大小:26 rpx; 　　} 　　._left { 　　margin-left: 40 rpx; 　　字体大小:26 rpx; 　　颜色:# 14 a1fd; 　　} 　　　　

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

　　　　/* * 　　*页面的初始数据　　*/数据:{ 　　列表:( 　　{“num”:“我是第一个"}, 　　{“num”:“我是第二个"}, 　　{“num”:“我是第三个"}, 　　{“num”:“我是第四个"}, 　　{“num”:“我是第五个"}, 　　{“num”:“我是第六个"}, 　　{“num”:“我是第七个"}, 　　{“num”:“我是第八个"}, 　　{“num”:“我是第九个"}, 　　{“num”:“我是第十个“} 　　), 　　idx: 0 　　}，　　goIndex (e) { 　　让指数=e.currentTarget.dataset.index;//console.log(“每个指数,指数) 　　}，/* * 　　*生命周期函数——监听页面加载　　*/alt="微信小程序实现默认第一个选中变色效果">

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

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

　　　　　　goIndex (e) { 　　让指数=e.currentTarget.dataset.index;//console.log(“每个指数,指数) 　　this.setData ({ 　　idx:指数　　}) 　　}, 　　　　

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