Discuz!X觸屏版所有頁(yè)面增加懸浮按鈕【AI寫(xiě)代碼】

qzuser1212

起因是有個(gè)客戶(hù)買(mǎi)了uniapp生成微信小程序的插件

他用的觸屏模板的頂部導(dǎo)航不是fixed在頂部，而是會(huì)隨著頁(yè)面上滑而上滑（官方默認(rèn)的也是這樣）
在瀏覽器里系統(tǒng)會(huì)提供返回按鈕，但是小程序系統(tǒng)是沒(méi)有的。
雖然這個(gè)不是我服務(wù)范圍內(nèi)的事情，但是他態(tài)度很好，所以就順手幫忙做了，發(fā)出來(lái)也給有需要的人分享下。

這次直接使用ai寫(xiě)代碼

提問(wèn)：

我需要在 Discuz!X 論壇的觸屏版(模板目錄為 template/zaoer_qwap/touch/)的所有頁(yè)面右下角添加三個(gè)懸浮按鈕。
這三個(gè)按鈕分別是: 返回上一頁(yè)   返回論壇首頁(yè)   返回當(dāng)前頁(yè)面頂部(只在頁(yè)面滾動(dòng)超過(guò)一屏幕高度時(shí)顯示)

使用字體圖標(biāo)顯示,需要引入字體庫(kù)。
按鈕樣式盡量簡(jiǎn)潔,并添加一些基本的懸浮動(dòng)畫(huà)效果。

AI回答：


好的,根據(jù)你的需求,我們需要修改的文件是 `template/zaoer_qwap/touch/common/header.htm`。以下是完整的修改代碼:

1. 在文件中找到 `header` 并在下一行添加以下代碼,引入 Font Awesome 字體庫(kù):

1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   

復(fù)制代碼

2. 在文件末尾,添加以下 HTML 代碼:

1. <div class="float-buttons">
   
2.     <a href="javascript:history.back();" class="float-btn back-btn" title="返回上一頁(yè)"><i class="fas fa-arrow-left"></i></a>
   
3.     <a href="$_G['siteurl']" class="float-btn home-btn" title="返回首頁(yè)"><i class="fas fa-home"></i></a>
   
4.     <a href="#" class="float-btn top-btn" title="返回頂部" style="display:none;"><i class="fas fa-arrow-up"></i></a>
   
5. </div>

復(fù)制代碼

3. 在上面 HTML 代碼之前,添加以下 CSS 樣式代碼:

1. <style>
   
2. .float-buttons { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
   
3. .float-btn { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12); transition: all 0.3s ease; }
   
4. .float-btn:hover { background: rgba(0,0,0,0.8); transform: translateY(-3px); box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); }
   
5. </style>

復(fù)制代碼

4. 在上面 CSS 代碼之后,添加以下 jQuery 代碼:

1. <script>
   
2. $(window).scroll(function() {
   
3.     if ($(window).scrollTop() >= $(window).height()) {
   
4.         $(".top-btn").show();
   
5.     } else {
   
6.         $(".top-btn").hide();
   
7.     }
   
8. });
   
9. </script>

復(fù)制代碼

以上代碼實(shí)現(xiàn)了以下功能:

- 引入 Font Awesome 字體庫(kù)
- 在頁(yè)面右下角添加三個(gè)按鈕,分別是返回上一頁(yè)、返回論壇首頁(yè)、返回當(dāng)前頁(yè)面頂部
- 使用 Font Awesome 圖標(biāo)顯示按鈕
- 為按鈕添加了簡(jiǎn)潔的樣式,包括位置、大小、顏色、陰影等
- 為按鈕添加了懸浮動(dòng)畫(huà)效果,鼠標(biāo)懸停時(shí)按鈕會(huì)上浮并改變陰影
- 通過(guò) jQuery 監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件,當(dāng)滾動(dòng)距離超過(guò)一屏高度時(shí)顯示"返回頂部"按鈕,否則隱藏

注意,如果你的論壇沒(méi)有加載 jQuery 庫(kù),上面的 jQuery 代碼可能無(wú)法正常工作,你需要先引入 jQuery 庫(kù)。

這樣就完成了你的需求,如有任何其他問(wèn)題,歡迎繼續(xù)提出。

繼續(xù)提問(wèn)：

發(fā)現(xiàn)3個(gè)體驗(yàn)不好的地方：
1. 即使是首次訪問(wèn)，也會(huì)顯示返回上一頁(yè)
2.首頁(yè)會(huì)顯示首頁(yè)按鈕
3.返回頂部的按鈕顯示的太晚，下滑了很久才顯示

AI回復(fù)：
好的,根據(jù)你提出的3個(gè)不太好的體驗(yàn),我們可以做如下優(yōu)化:

1. 判斷是否是首次訪問(wèn),如果是則不顯示"返回上一頁(yè)"按鈕

2. 判斷當(dāng)前頁(yè)面是否是論壇首頁(yè),如果是則不顯示"返回首頁(yè)"按鈕

3. 提前顯示"返回頂部"按鈕,比如滾動(dòng)超過(guò)300像素時(shí)就顯示

修改后的代碼:

游客，如果您要查看本帖隱藏內(nèi)容請(qǐng)回復(fù)

注意以下幾點(diǎn):

1. 對(duì)"返回上一頁(yè)"按鈕添加了判斷,如果是首次訪問(wèn)(`!isset($_SERVER['HTTP_REFERER'])`)則隱藏該按鈕

2. 對(duì)"返回首頁(yè)"按鈕添加了判斷,如果當(dāng)前頁(yè)面是論壇首頁(yè)(`$_G['PHP_SELF'] == $_G['siteurl']`)則隱藏該按鈕

3. 將顯示"返回頂部"按鈕的滾動(dòng)距離改為300像素

通過(guò)這些優(yōu)化,應(yīng)該解決了你提出的3個(gè)體驗(yàn)問(wèn)題。如果還有任何其他需求,歡迎繼續(xù)反饋。



我覺(jué)得300還是有點(diǎn)長(zhǎng)，就改為100像素了，大功告成！

這個(gè)代碼是可以運(yùn)行沒(méi)有啥問(wèn)題的，但是如果還想優(yōu)化，可以考慮將字體文件下載到本地引入，把css和js寫(xiě)到專(zhuān)門(mén)的css文件引入，也可以將部分代碼移到footer中。如果想更自定義一些，也可以考慮做成插件

最后附上問(wèn)答圖片和最后的效果圖

初錦

雞屁踢已經(jīng)這么強(qiáng)大了嗎，恐怖如斯！

pcyi

哈哈 小的修改直接問(wèn)Ai了 給的代碼幾乎都可以用 但是效果都不太好；你這個(gè)引導(dǎo)提問(wèn)就很好了，學(xué)會(huì)了，下次繼續(xù)深度引導(dǎo)提問(wèn)。

jane520

挺好的啊   

正定熱線

正需要啊，沒(méi)想到AI能做到這個(gè)程度，主要自己還得會(huì)修改。

海哥

頂樓主啦..希望樓主多發(fā)精品好帖啦.....

海哥

我去，現(xiàn)在AI都這么智能了么

qzuser1212

pcyi 發(fā)表于 2024-5-12 08:27
哈哈 小的修改直接問(wèn)Ai了 給的代碼幾乎都可以用 但是效果都不太好；你這個(gè)引導(dǎo)提問(wèn)就很好了，學(xué)會(huì)了，下次 ...

這個(gè)是另外一個(gè)免費(fèi)的，gpt沒(méi)續(xù)費(fèi)

pcyi

qzuser1212 發(fā)表于 2024-5-14 11:18
這個(gè)是另外一個(gè)免費(fèi)的，gpt沒(méi)續(xù)費(fèi)

我當(dāng)時(shí)用的百度的文心一言

qzuser1212

pcyi 發(fā)表于 2024-5-14 14:10
我當(dāng)時(shí)用的百度的文心一言

國(guó)內(nèi)的都一言難盡，這個(gè)是免費(fèi)的claude