公司有个项目页面是关于音频播放的,
未学习时标题是:黑色、学习时标题是:橙色、学过后标题颜色是:灰色
页面效果如下:
思路: 1. 未点击时:添加类名:contents-title(颜色是灰色);
2. 点击时:添加类名:contents-title-active(颜色是橙色),同时保存此时的index值(后续根据存的值来给元素添加类名(灰色));
3. 点击后:添加类名:contents-title-learned(颜色是灰色);
4. 用两个值来判断类名状态
wxml:
<view class="contents">
<view
class="contents-box"
wx:for="{{contentsList}}"
bindtap="contentsShow"
data-index="{{index}}"
data-item="{{item}}"
wx:key="index">
<image
class="contents-img"
src="{{contentsShow == index ? 'https://img.qianshu.com/pause.png' : 'https://img.qianshu.com/play.png'}}">
</image>
<view class="contents-right">
<!-- 更改颜色的题目 -->
<view
class="contents-title {{item.islearned == true ? 'contents-title-learned' : ''}} {{item.isplay == true ? 'contents-title-active' : ''}}"
>01 | {{item.title}}
</view>
<view class="contents-time">{{item.time}} | {{item.student}}</view>
<view class="student">未学习</view>
</view>
</view>
</view>
wxss:
/* 黑色 */
.contents-title{
font-size: 30rpx;
color: #333333;
margin-bottom: 10rpx;
}
/* 灰色 */
.contents-title-learned{
color: #999999;
}
/* 橙色 */
.contents-title-active{
color: #fcad2a;
}
wx.js:
data: {
contentsList: [{
id: 0,
islearned: false,
isplay: false,
name: '孔子',
title: '为什么是他实现了文明的突破asasa?',
time: '11分23秒',
student: '已学12%'
},
{
id: 1,
islearned: false,
isplay: false,
name: '孔子',
title: '为什么是他实现了文明的突破?',
time: '11分23秒',
student: '已学12%'
},
{
id: 2,
islearned: false,
isplay: false,
name: '孔子',
title: '为什么是他实现了文明的突破?',
time: '11分23秒',
student: '已学12%'
},
{
id: 3,
islearned: false,
isplay: false,
name: '孔子',
title: '为什么是他实现了文明的突破?',
time: '11分23秒',
student: '已学12%'
}
],
learnstatus: -1, // 控制灰色的阈值
},
// 课程目录切换
contentsShow(e) {
let _this = this;
// 获取当前的下标索引值
let { index, } = e.currentTarget.dataset;
// 获取data里的列表
let contentsList = _this.data.contentsList;
contentsList.forEach(element => {
// 当前点击的索引 变橙色
if(index == element.id){
element.isplay = true;
}
// 上一个点击的索引 变灰色
if(element.id == _this.data.learnstatus){
element.islearned = true;
element.isplay = false;
}
});
_this.setData({
contentsShow: index,
learnstatus: index,
contentsList: contentsList,
})
},