小程式如何實現「面板」切換

2021-10-03 09:24:09 字數 1198 閱讀 9318

class


="mask"


:class


="computedbgp"


>


view


>


computed:


},


export


default


, onlaunch:


function()


, onshow:


function()


);}}


, onhide:


function()


}<


/script>
通過這樣的方法，我們就可以得到乙個動態的class名，mask繫結的class為：『bgp』+字尾，字尾可通過後端獲取每個使用者對應的背景圖，或是根據時間切換。例如夜間模式我引入的class是『bgp_night』，接下來可以在全域性引入乙個bgp.css，裡面是不同class字尾對應的background-image。

.mask


.bgp_night
看明白了上面背景圖的切換方法，樣式也是一樣的，建議將所有可以改變的樣式寫到乙個css裡，這樣不同的**分別對應乙個不同名稱的css，將這些css全部引入，用上面的方法改變繫結的class名稱即可。

舉乙個小小的例子：

/*******************pages*******************/


/*index*/


.index .welcometag


/*******************pages*******************/


/*index*/


.index_night .welcometag
可以看到我是用的方法是：在頁面最頂層的view裡繫結乙個動態的class，頁面下面的所有部件class根據最頂層的.index+字尾而改變

>


>


class


="main"


:class


="computedclass"


>


computed:,}


,

小程式 除錯面板

1 console面板 控制台，作用 2 sources面板 原始檔除錯資訊頁 用於顯示當前專案的指令碼檔案 3 network面板 網路除錯資訊頁 用於觀察和顯示每個元素請求資訊和套接字 socket 狀態等網路相關的詳細資訊 4 storage面板 資料儲存資訊頁 用於顯示當前專案使用儲存api...

小程式雙重for迴圈實現tab切換小demo

pages test test.js page clickhandle e 生命週期函式 監聽頁面載入 onload function options console.log a,b this.setdata console.log this.data.a,jjj 生命週期函式 監聽頁面初次渲染完成...

小程式元件swiper 如何修改面板指示點樣式

官方文件裡，swiper的指示點預設是圓形，且只能修改其顏色。如果要修改形狀，有兩種思路 1.隱藏官方的面板指示點 官方有提供屬性可以隱藏 自己用view重寫元件 個人覺得這個比較麻煩 此篇文章不做講解 2.弄清swiper裡控制指示點的類，並對其中樣式進行修改。第二種方法怎麼修改指示點樣式呢？首先...