小程序-未学习:黑色、学习中:橙色、学过后:灰色

本文主要是介绍小程序-未学习:黑色、学习中:橙色、学过后:灰色，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

公司有个项目页面是关于音频播放的，

未学习时标题是:黑色、学习时标题是:橙色、学过后标题颜色是:灰色

页面效果如下：

思路： 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,
    })
  },

这篇关于小程序-未学习:黑色、学习中:橙色、学过后:灰色的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！