如上圖所示，假設這是一個傳統的秒殺購買場景：

（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中；

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。