如上圖所示，假設(shè)這是一個(gè)傳統(tǒng)的秒殺購(gòu)買場(chǎng)景：

（1）問(wèn)題概述：

? ? ? ? 狀態(tài)：?（1）進(jìn)入秒殺? （2）進(jìn)入秒殺? （3）立即預(yù)約? （4）寶貝秒光? （5）活動(dòng)結(jié)束 ?

? ? ? ? 文字：? ?進(jìn)入 秒殺文字顏色#fff，其他文字顏色都是 #ff3B56；
? ? ? ? ? ? ??寶貝秒光，活動(dòng)結(jié)束，文字帶透明度30%；

? ? ? ? 描邊：? ?只有立即預(yù)約有描邊，其他狀態(tài)都沒(méi)有

? ? ? ?按鈕透明度：立即預(yù)約 8% ?進(jìn)入秒殺 ?100% ?寶貝秒光? 8% 活動(dòng)結(jié)束? ?8%

（2）解決方案：

? ? ? ?拿到這個(gè)問(wèn)題，首先很多人想想到的是通過(guò)，if else判斷展示邏輯，但是 實(shí)際使用這種方式，情況會(huì)變得很復(fù)雜，而且難以維護(hù)；

方式一：邏輯判斷

{/* 立即預(yù)約、寶貝秒光，活動(dòng)結(jié)束 */}{+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的判斷邏輯其實(shí)還要加上CSS的處理，相當(dāng)?shù)穆闊?#xff0c;這里不再概述；

方式二：CSS和html抽離，進(jìn)行CSS注入

const BTN_STATUS = [{ id: 1, des: '進(jìn)入秒殺' },{ id: 2, des: '進(jìn)入秒殺' },{ id: 3, des: '立即預(yù)約' },{ id: 4, des: '寶貝已秒光' },{ id: 5, des: '秒殺已結(jié)束' }, ];const getBtnText = (text) => {const filterText = BTN_STATUS.filter((v) => {if (+v.id === +text) {return v.des;}});return filterText[0].des; };//16進(jìn)制轉(zhuǎn)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就是實(shí)際列表的數(shù)據(jù){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進(jìn)行解耦，然后 通過(guò)不同的狀態(tài)對(duì)應(yīng)的css通過(guò)btnStyle，注入到html中；

總結(jié)

以上是生活随笔為你收集整理的一个列表中按钮的不同样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。