# 個性化模板 **視頻教程：**[https://www.bilibili.com/video/av49803851/](https://www.bilibili.com/video/av49803851/) ***** [TOC] #### **超期自定義樣式設置說明** [](http://help.immmmmm.com/uploads/article/20190403/f85ab5e5d3110542a1c281ea6fb032b8.png) **1.上邊距線**：開啟后模塊上面有一條灰色的間隔線 **2.模塊左右間隔**：開啟后模塊與模塊之間有左右間距，下圖所示 [](http://help.immmmmm.com/uploads/article/20190403/0c6cb056af9dd97318cdf9e8fea9cb10.png) **3.左右間隔像素**：圖與圖之間的左右間隔像素，需要填寫整數。普遍填寫6-10左右，下圖所示 [](http://help.immmmmm.com/uploads/article/20190403/1e30c43d363e2729f844fa65c9134ac2.png) **4.上下間隔像素**：圖與模塊之間的上下間隔，需要填寫整數。普遍填寫6-10左右，下圖所示 [](http://help.immmmmm.com/uploads/article/20190403/f4bc50ae29bcc80cdf2374b1078340b5.jpg) **5.背景顏色**：一般設置#fff，也是默認的白色，如果想設置其他顏色自行設置 **6.分割顯示個數**：設置后每個圖片按照顯示的100%÷分割個數 = 圖片的寬度%，如果設置左右間隔，會影響實際的顯示個數，自行更改即可 **7.圖片圓角**：一般圖片在未處理的情況下都是直角，可以直接設置圓角像素即可實現效果不需要在PS中設計，一般2-8px，自行更改嘗試 **8.字體顏色**：更改后字體顏色將變化 **9.自動輪播時間**：單位是毫秒，默認3000毫秒，不易過快 **10.禁止滑動**：開啟后將不能手動左右滑動，注意如果開啟了自動播放是可以正常切換，但不能手動滑動 **11.指示燈樣式**：在開啟自動輪播的情況下會出現指示燈，以便讓用戶知道正在預覽第幾個圖片，可選擇圓形樣式或者橫排的樣式，自行設置體驗 **12.指示燈位置**：設置后將改變指示燈的位置，下圖所示 上（圓角）： [](http://help.immmmmm.com/uploads/article/20190403/6818aea1ac73db67cea488d8cc41b73c.jpg) 下（橫排）： [](http://help.immmmmm.com/uploads/article/20190403/298125ef449167671ed3b0dd17fd5ffa.jpg) **13.商品同步大淘客**：可以去掉原來的固定輪播圖切換現在的輪播圖，可隨意調整位置，開啟后將獲取大淘客的輪播圖商品專題進行顯示。 **14.自動播放**：開啟后將自動滑動播放 ***** #### 1.使用該模塊實現：頭部的專題輪播圖 [](http://help.immmmmm.com/uploads/article/20190403/7a914439b747275169baa177cf8c43ae.png) 保存后實現效果： [](http://help.immmmmm.com/uploads/article/20190403/e5e86d04fc095d797507c5af94418039.gif) #### 2.使用該模塊實現4眼5眼效果 [](http://help.immmmmm.com/uploads/article/20190403/665b5379959d5a7aec89449504c50f6f.jpg) 先添加眼的icon圖標 [](http://help.immmmmm.com/uploads/article/20190403/3b88d5531ea46ff35695c59213cd3db3.png) 添加之后設置右邊的參數 一般五個眼設置左右間隔30，個數7.6個，由于左右間隔的空間比較大，可以適當更改顯示參數，直到調整到顯示五個眼為止 [](http://help.immmmmm.com/uploads/article/20190403/97dd52a9109d9e7e10d3f2975b19c149.png) 如果只顯示4或5個眼，可以禁止滑動效果。 [](http://help.immmmmm.com/uploads/article/20190403/89f3daaadb9f6ce471cffd6c9f86e6f0.png) 如果想設置多個眼進行左右滑動，則關閉禁止滑動選項，多追加幾個眼即可實現下圖所示效果 [](http://help.immmmmm.com/uploads/article/20190403/5f54b8a1dad26c66f50e8a348e3b9557.gif) #### 3.使用該模塊實現：左右滑動顯示1.7個活動圖效果 [](http://help.immmmmm.com/uploads/article/20190403/76eea1ececf694e9cedbe8aac273a183.gif) 需要設置模塊間距上下左右像素（可選擇）圖片的圓角（可選擇）自動滑動播放（可選擇），顯示個數可設置1.6個或者自行設置即可實現該效果 [](http://help.immmmmm.com/uploads/article/20190403/b06759f66b8409b7f35e5cf53d3e858b.png) #### 4.使用該模塊實現：左右滑動商品單品效果 [](http://help.immmmmm.com/uploads/article/20190403/dbdd83a8ca16d626bad5bc2cb36827cd.gif) 需要設置模塊間距上下左右像素（可選擇）圖片的圓角（可選擇）自動滑動播放（可選擇），顯示個數可設置3.4個或者自行設置即可實現該效果 [](http://help.immmmmm.com/uploads/article/20190403/92fdea8fb984149113084c944a82f722.png) **5.使用該模塊實現：實現現有的【活動圖】【拼圖三】【拼圖四】【拼圖五】效果 ** 例如拼圖1： [](http://help.immmmmm.com/uploads/article/20190403/8af48abfa76dcae8127c5065e284ada4.jpg) 上傳活動圖之后設置邊距可選擇【無】，顯示填寫1就是現有的【活動圖】效果，填寫2是現有的【拼圖三】效果，填寫3是現有的【拼圖四】效果，填寫4是現有的【拼圖五】效果，可設置禁止左右滑動后與現有模塊無任何無別。也可以設置自動滑動播放或者分割顯示 [](http://help.immmmmm.com/uploads/article/20190403/858eefa464621152322240dd40cb5589.jpg) 可實現以下效果 [](http://help.immmmmm.com/uploads/article/20190403/fa57bb5f8ef554038322841a302587b0.jpg) 如開啟左右滑動以及分割顯示可實現以下效果 [](http://help.immmmmm.com/uploads/article/20190403/7214acb2a8320d90e20809267df535eb.gif) 配合使用可實現以下效果 [](http://help.immmmmm.com/uploads/article/20190403/68091879378b300bff3b154c553d6402.gif) **可克隆后臺共享模板自行體驗** ***** ### 注意事項 ``` 1.更改個性化界面，改完之后，不需要重新同步打包 ``` ``` 2.改完界面，記得保存并刷新，而且模板要更改版本號為你當前APP的版本，設置成“通用”是沒有變化的 ``` ``` 3.如果界面沒有改變，檢查是否更改版本號，是否保存并刷新模板，是否重啟APP了 ``` ``` 4.每個app的版本，都要對應設置后臺的一個模板版本號，比如4.0版本的app，你后臺沒有4.0的模板，是會顯示默認模板的，所以需要你克隆一個你正在用的模板，然后更過版本給4.0 ``` ***** **修改了界面，前端卻沒有變化的問題** 解決方案：[修改APP界面無變化](%E5%90%84%E7%A7%8D%E5%B0%8F%E9%97%AE%E9%A2%98%E7%9A%84%E9%9B%86%E5%90%88/%E4%BF%AE%E6%94%B9APP%E7%95%8C%E9%9D%A2%E6%97%A0%E5%8F%98%E5%8C%96.md)