久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區

標題: Discuz!X觸屏版所有頁面增加懸浮按鈕【AI寫代碼】 [打印本頁]

作者: qzuser1212 時間: 2024-5-11 22:36
標題: Discuz!X觸屏版所有頁面增加懸浮按鈕【AI寫代碼】
本帖最后由 qzuser1212 于 2024-5-12 12:44 編輯

起因是有個客戶買了uniapp生成微信小程序的插件

他用的觸屏模板的頂部導航不是fixed在頂部，而是會隨著頁面上滑而上滑（官方默認的也是這樣）
在瀏覽器里系統會提供返回按鈕，但是小程序系統是沒有的。
雖然這個不是我服務范圍內的事情，但是他態度很好，所以就順手幫忙做了，發出來也給有需要的人分享下。

這次直接使用ai寫代碼

提問：

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

使用字體圖標顯示,需要引入字體庫。
按鈕樣式盡量簡潔,并添加一些基本的懸浮動畫效果。

AI回答：

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

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

<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" />

復制代碼

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

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

復制代碼

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

<style>
.float-buttons { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
.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; }
.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); }
</style>

復制代碼

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

<script>
$(window).scroll(function() {
if ($(window).scrollTop() >= $(window).height()) {
$(".top-btn").show();
} else {
$(".top-btn").hide();
}
});
</script>

復制代碼

以上代碼實現了以下功能:

- 引入 Font Awesome 字體庫
- 在頁面右下角添加三個按鈕,分別是返回上一頁、返回論壇首頁、返回當前頁面頂部
- 使用 Font Awesome 圖標顯示按鈕
- 為按鈕添加了簡潔的樣式,包括位置、大小、顏色、陰影等
- 為按鈕添加了懸浮動畫效果,鼠標懸停時按鈕會上浮并改變陰影
- 通過 jQuery 監聽頁面滾動事件,當滾動距離超過一屏高度時顯示"返回頂部"按鈕,否則隱藏

注意,如果你的論壇沒有加載 jQuery 庫,上面的 jQuery 代碼可能無法正常工作,你需要先引入 jQuery 庫。

這樣就完成了你的需求,如有任何其他問題,歡迎繼續提出。

繼續提問：

發現3個體驗不好的地方：
1. 即使是首次訪問，也會顯示返回上一頁
2.首頁會顯示首頁按鈕
3.返回頂部的按鈕顯示的太晚，下滑了很久才顯示

AI回復：
好的,根據你提出的3個不太好的體驗,我們可以做如下優化:

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

2. 判斷當前頁面是否是論壇首頁,如果是則不顯示"返回首頁"按鈕

3. 提前顯示"返回頂部"按鈕,比如滾動超過300像素時就顯示

修改后的代碼:

注意以下幾點:

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

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

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

通過這些優化,應該解決了你提出的3個體驗問題。如果還有任何其他需求,歡迎繼續反饋。

我覺得300還是有點長，就改為100像素了，大功告成！

這個代碼是可以運行沒有啥問題的，但是如果還想優化，可以考慮將字體文件下載到本地引入，把css和js寫到專門的css文件引入，也可以將部分代碼移到footer中。如果想更自定義一些，也可以考慮做成插件

最后附上問答圖片和最后的效果圖

(, 下載次數: 88) (, 下載次數: 76) (, 下載次數: 78) (, 下載次數: 102)

作者: 初錦 時間: 2024-5-11 23:05
雞屁踢已經這么強大了嗎，恐怖如斯！

作者: pcyi 時間: 2024-5-12 08:27
哈哈小的修改直接問Ai了給的代碼幾乎都可以用但是效果都不太好；你這個引導提問就很好了，學會了，下次繼續深度引導提問。

作者: jane520 時間: 2024-5-12 09:38
挺好的啊

作者: 正定熱線 時間: 2024-5-12 09:46
正需要啊，沒想到AI能做到這個程度，主要自己還得會修改。

作者: 海哥 時間: 2024-5-12 17:54
頂樓主啦..希望樓主多發精品好帖啦.....

作者: 海哥 時間: 2024-5-13 10:11
我去，現在AI都這么智能了么

作者: qzuser1212 時間: 2024-5-14 11:18

pcyi 發表于 2024-5-12 08:27
哈哈小的修改直接問Ai了給的代碼幾乎都可以用但是效果都不太好；你這個引導提問就很好了，學會了，下次 ...

這個是另外一個免費的，gpt沒續費

作者: pcyi 時間: 2024-5-14 14:10

qzuser1212 發表于 2024-5-14 11:18
這個是另外一個免費的，gpt沒續費

我當時用的百度的文心一言

作者: qzuser1212 時間: 2024-5-14 20:22

pcyi 發表于 2024-5-14 14:10
我當時用的百度的文心一言

國內的都一言難盡，這個是免費的claude

作者: s77 時間: 2024-5-18 13:24
學習一下。

作者: 海哥 時間: 2024-6-6 11:02
頂樓主啦..希望樓主多發精品好帖啦.....

作者: 八八 時間: 2024-7-13 11:56
正需要，看看

作者: amw111 時間: 2024-7-25 20:47
2222222222222222

作者: s77 時間: 2025-4-7 22:32
學習一下。

作者: 風吹故人香 時間: 2025-4-7 22:45
5555555555

作者: 要早安??~喵?? 時間: 2025-4-10 03:32
試試看噢

歡迎光臨 Discuz! 官方交流社區 (http://www.9999xn.com/)