一个列表中按钮的不同样式

如上图所示，假设这是一个传统的秒杀购买场景：

（1）问题概述：

状态： （1）进入秒杀（2）进入秒杀（3）立即预约（4）宝贝秒光（5）活动结束

文字： 进入秒杀文字颜色#fff，其他文字颜色都是 #ff3B56；
宝贝秒光，活动结束，文字带透明度30%；

描边： 只有立即预约有描边，其他状态都没有

按钮透明度：立即预约 8% 进入秒杀 100% 宝贝秒光 8% 活动结束 8%

（2）解决方案：

拿到这个问题，首先很多人想想到的是通过，if else判断展示逻辑，但是实际使用这种方式，情况会变得很复杂，而且难以维护；

方式一：逻辑判断

 {/* 立即预约、宝贝秒光，活动结束 */}{+v.status === 3 || +v.status === 4 || +v.status === 5 ? <ViewclassName='benifit-wrapper'onClick={() => {goYuYUe(v);}}style={{ background: titleColor, opacity: '0.06'}}
>{+v.status === 3 ? <Text style={{ color: titleColor, border: '3px solid #ccc', borderColor: titleColor }} className="benifit" lines={1}>{getBtnText(v.status)}</Text> : <Text style={{ color: titleColor}} className="benifit" lines={1}>{getBtnText(v.status)}</Text>}
</View> : <ViewclassName='benifit-wrapper'onClick={() => {goYuYUe(v);}}style={{ background: titleColor}}
><Text style={{ color: '#fff' }} className="benifit" lines={1}>{getBtnText(v.status)}</Text>
</View>
}

这里只是html的判断逻辑其实还要加上CSS的处理，相当的麻烦，这里不再概述；

方式二：CSS和html抽离，进行CSS注入

const BTN_STATUS = [{ id: 1, des: '进入秒杀' },{ id: 2, des: '进入秒杀' },{ id: 3, des: '立即预约' },{ id: 4, des: '宝贝已秒光' },{ id: 5, des: '秒杀已结束' },
];const getBtnText = (text) => {const filterText = BTN_STATUS.filter((v) => {if (+v.id === +text) {return v.des;}});return filterText[0].des;
};//16进制转RGBconst colorToRGB = (color, opt) => {let color1, color2, color3;color = '' + color;if (typeof color !== 'string') return;if (color.charAt(0) == '#') {color = color.substring(1);}if (color.length == 3) {color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];}if (/^[0-9a-fA-F]{6}$/.test(color)) {color1 = parseInt(color.substr(0, 2), 16);color2 = parseInt(color.substr(2, 2), 16);color3 = parseInt(color.substr(4, 2), 16);return 'rgb(' + color1 + ',' + color2 + ',' + color3 + ',' + opt + ')';}};// realList就是实际列表的数据{realList.map((v, index) => {switch (+v?.status) {case 1:btnStyle = {backgroundColor: titleColor,color: '#fff',border: 0,opacity: 1};break;case 2:btnStyle = {backgroundColor: titleColor,color: '#fff',border: 0,opacity: 1};break;case 3:btnStyle = {backgroundColor: colorToRGB(titleColor, 0.06),color: titleColor,border: `1px solid ${titleColor}`,opacity: 1};break;case 4:btnStyle = {backgroundColor: colorToRGB(titleColor, 0.06),color: titleColor,border: 0,opacity: 0.3};break;case 5:btnStyle = {backgroundColor: colorToRGB(titleColor, 0.06),color: titleColor,border: 0,opacity: 0.3};break;default:break;}return v?.status ? (<li><ViewclassName="benifit-wrapper"style={{border: btnStyle.border,background: btnStyle.backgroundColor,color: btnStyle.color,}}><Text className="benifit" lines={1} style ={{ opacity: `${btnStyle.opacity}`}}>{getBtnText(v.status)}</Text></li>)}
)}

如上述代码，我们将css和 html进行解耦，然后通过不同的状态对应的css通过btnStyle，注入到html中；

一个列表中按钮的不同样式相关推荐

(如何从一个列表中随机抽样）np.random.choice(),random.sample()
文章目录前言 numpy random.sample() 前言个人觉得np.random.choice()功能更加强大,random.sample()可以做到的,前者都可以做到. numpy 这个 ...
打印1-400以内能同时被5和9 整数的数将这些数放入一个列表中，再输出这个列表
import java.util.ArrayList;/*** @author silence* 打印1-400以内能同时被5和9 整数的数将这些数放入一个列表中,再输出这个列表*/ public ...
python中如何编写代码输入多个数据并把它们放在一个列表中去_10分钟学习函数式Python...
在这篇10分钟的文章中,您将学习Python中的函数式范型.您还将学习列表推导式. 目录函数式范式 Python的map函数是如何运行的 Python中的lambda表达式 Python中的redu ...
萌新的Python练习实例100例（七）将一个列表的数据复制到另一个列表中
题目: 将一个列表的数据复制到另一个列表中分析: · 这道题是联系list和切片的使用: 方法1: · 将b的值赋予a: · a[0:3]表示使用切片从0位置开始到第3位置结束: · a[:3]表示 ...
Python-将一个列表的数据复制到另一个列表中
# 题目:将一个列表的数据复制到另一个列表中 list1 = [x for x in range(1,5)]list2 = []print(list1)print(list2) #初始化 print( ...
python两两组合_python – 一个列表中的两个组合列表
我是一个Python初学者.我想从一个列表中获取两个组合列表. 例如,我有一个列表: c = [1, 2, 3, 4] 我想使用每四个项目来获得每个可能的组合来填充两个列表.将会有((2 ^ 4)/ ...
python统计列表中元素个数_python中计算一个列表中连续相同的元素个数方法
python中计算一个列表中连续相同的元素个数方法最简单的例子: a = [1,1,1,1,2,2,2,3,3,1,1,1,3] # 问:计算a中最多有几个连续的1 很明显,答案是4 如果用代码实现 ...
python单稳态触发_使用方法可以获取一个列表中最大元素的值。_学小易找答案...
[填空题]若在列表的最后添加新元素,则可以直接使用列表的方法. [填空题]将一个线程的属性设置为True,则该线程为守护线程. [填空题]是在调用函数时函数名后面的一对小括号中给出的参数列表. [ ...
python批量清除一个列表中的某个内容，filter和lambda结合使用的方法
利用python的filter和lambda,可以批量删除某一项内容,list里面有一些内容使我们不想要的,使用pop或者remove也是可以的,但是都是只会删除一个. 使用下面的方法,比较有效率一些 ...