Discuz!X触屏版所有页面增加悬浮按钮【AI写代码】
<br /><br />起因是有个客户买了uniapp生成微信小程序的插件<br /><br />他用的触屏模板的顶部导航不是fixed在顶部，而是会随着页面上滑而上滑（官方默认的也是这样）<br />在浏览器里系统会提供返回按钮，但是小程序系统是没有的。<br />虽然这个不是我服务范围内的事情，但是他态度很好，所以就顺手帮忙做了，发出来也给有需要的人分享下。<br /><br />这次直接使用ai写代码<br /><br /><strong><font size="4">提问：</font></strong><br /><br />我需要在 Discuz!X 论坛的触屏版(模板目录为 template/zaoer_qwap/touch/)的所有页面右下角添加三个悬浮按钮。<br />这三个按钮分别是: 返回上一页 返回论坛首页 返回当前页面顶部(只在页面滚动超过一屏幕高度时显示)<br /><br />使用字体图标显示,需要引入字体库。<br />按钮样式尽量简洁,并添加一些基本的悬浮动画效果。<br /><br /><font size="4"><strong>AI回答：</strong></font><br /><br /><br />好的,根据你的需求,我们需要修改的文件是 `template/zaoer_qwap/touch/common/header.htm`。以下是完整的修改代码:<br /><br />1. 在文件中找到 `header` 并在下一行添加以下代码,引入 Font Awesome 字体库:<br /><br /><br /><ol><li><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" /><br /><li></ol><br /><br />2. 在文件末尾,添加以下 HTML 代码:<br /><br /><br /><ol><li><div class="float-buttons"><br /><li> <a href="javascript:history.back();" class="float-btn back-btn" title="返回上一页"><i class="fas fa-arrow-left"></i></a><br /><li> <a href="$_G['siteurl']" class="float-btn home-btn" title="返回首页"><i class="fas fa-home"></i></a><br /><li> <a href="#" class="float-btn top-btn" title="返回顶部" style="display:none;"><i class="fas fa-arrow-up"></i></a><br /><li></div></ol><br /><br /><br />3. 在上面 HTML 代码之前,添加以下 CSS 样式代码:<br /><br /><ol><li><style><br /><li>.float-buttons { position: fixed; bottom: 20px; right: 20px; z-index: 999; }<br /><li>.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; }<br /><li>.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); }<br /><li></style></ol><br /><br />4. 在上面 CSS 代码之后,添加以下 jQuery 代码:<br /><br /><ol><li><script><br /><li>$(window).scroll(function() {<br /><li> if ($(window).scrollTop() >= $(window).height()) {<br /><li> $(".top-btn").show();<br /><li> } else {<br /><li> $(".top-btn").hide();<br /><li> }<br /><li>});<br /><li></script></ol><br /><br />以上代码实现了以下功能:<br /><br />- 引入 Font Awesome 字体库<br />- 在页面右下角添加三个按钮,分别是返回上一页、返回论坛首页、返回当前页面顶部<br />- 使用 Font Awesome 图标显示按钮<br />- 为按钮添加了简洁的样式,包括位置、大小、颜色、阴影等<br />- 为按钮添加了悬浮动画效果,鼠标悬停时按钮会上浮并改变阴影<br />- 通过 jQuery 监听页面滚动事件,当滚动距离超过一屏高度时显示"返回顶部"按钮,否则隐藏<br /><br />注意,如果你的论坛没有加载 jQuery 库,上面的 jQuery 代码可能无法正常工作,你需要先引入 jQuery 库。<br /><br />这样就完成了你的需求,如有任何其他问题,欢迎继续提出。<br /><br /><font size="4"><strong>继续提问：</strong></font><br /><br />发现3个体验不好的地方：<br />1. 即使是首次访问，也会显示返回上一页<br />2.首页会显示首页按钮<br />3.返回顶部的按钮显示的太晚，下滑了很久才显示<br /><br /><font size="4"><strong>AI回复：</strong></font><br />好的,根据你提出的3个不太好的体验,我们可以做如下优化:<br /><br />1. 判断是否是首次访问,如果是则不显示"返回上一页"按钮<br /><br />2. 判断当前页面是否是论坛首页,如果是则不显示"返回首页"按钮 <br /><br />3. 提前显示"返回顶部"按钮,比如滚动超过300像素时就显示<br /><br />修改后的代码:<br /><br /><br />注意以下几点:<br /><br />1. 对"返回上一页"按钮添加了判断,如果是首次访问(`!isset($_SERVER['HTTP_REFERER'])`)则隐藏该按钮<br /><br />2. 对"返回首页"按钮添加了判断,如果当前页面是论坛首页(`$_G['PHP_SELF'] == $_G['siteurl']`)则隐藏该按钮<br /><br />3. 将显示"返回顶部"按钮的滚动距离改为300像素<br /><br />通过这些优化,应该解决了你提出的3个体验问题。如果还有任何其他需求,欢迎继续反馈。<br /><br /><br /><br /><font size="3"><strong>我觉得300还是有点长，就改为100像素了，大功告成！</strong></font><br /><blockquote>这个代码是可以运行没有啥问题的，但是如果还想优化，可以考虑将字体文件下载到本地引入，把css和js写到专门的css文件引入，也可以将部分代码移到footer中。如果想更自定义一些，也可以考虑做成插件</blockquote><br />最后附上问答图片和最后的效果图<br /><br /><img title="WX20240511-212143@2x.png" id="aimg_29754" aid="29754" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202405/11/223645ffybddcyydwkp8p5.png" src="https://www.dismall.com/data/attachment/forum/202405/11/223645ffybddcyydwkp8p5.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="WX20240511-212206@2x.png" id="aimg_29755" aid="29755" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202405/11/223646h4hw9gefqh9nk80q.png" src="https://www.dismall.com/data/attachment/forum/202405/11/223646h4hw9gefqh9nk80q.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="WX20240511-215118@2x.png" id="aimg_29756" aid="29756" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202405/11/223646fnrstjomzst3ssr9.png" src="https://www.dismall.com/data/attachment/forum/202405/11/223646fnrstjomzst3ssr9.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><img title="WX20240511-222334@2x.png" id="aimg_29757" aid="29757" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202405/11/223646c45js5umu7zu4w1s.png" src="https://www.dismall.com/data/attachment/forum/202405/11/223646c45js5umu7zu4w1s.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />按钮<em>, </em>返回<em>, </em>size<em>, </em>页面<em>, </em>顶部 鸡屁踢已经这么强大了吗，恐怖如斯！ 哈哈 小的修改直接问Ai了 给的代码几乎都可以用 但是效果都不太好；你这个引导提问就很好了，学会了，下次继续深度引导提问。 挺好的啊 正需要啊，没想到AI能做到这个程度，主要自己还得会修改。 顶楼主啦..希望楼主多发精品好帖啦..... 我去，现在AI都这么智能了么 <br />这个是另外一个免费的，gpt没续费 <br />我当时用的百度的文心一言 <br />国内的都一言难尽，这个是免费的claude
頁:
[1]