12下一页
返回列表 发帖
查看: 397|回复: 10

Discuz!X触屏版所有页面增加悬浮按钮【AI写代码】

64

主题

407

回帖

590

积分

应用开发者

贡献
10 点
金币
26 个
QQ
发表于 2024-5-11 22:36:23 | 显示全部楼层 |阅读模式


起因是有个客户买了uniapp生成微信小程序的插件

他用的触屏模板的顶部导航不是fixed在顶部,而是会随着页面上滑而上滑(官方默认的也是这样)
在浏览器里系统会提供返回按钮,但是小程序系统是没有的。
虽然这个不是我服务范围内的事情,但是他态度很好,所以就顺手帮忙做了,发出来也给有需要的人分享下。

这次直接使用ai写代码

提问:

我需要在 Discuz!X 论坛的触屏版(模板目录为 template/zaoer_qwap/touch/)的所有页面右下角添加三个悬浮按钮。
这三个按钮分别是: 返回上一页   返回论坛首页   返回当前页面顶部(只在页面滚动超过一屏幕高度时显示)

使用字体图标显示,需要引入字体库。
按钮样式尽量简洁,并添加一些基本的悬浮动画效果。

AI回答:


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

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


  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" />
复制代码


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


  1. <div class="float-buttons">
  2.     <a href="javascript:history.back();" class="float-btn back-btn" title="返回上一页"><i class="fas fa-arrow-left"></i></a>
  3.     <a href="$_G['siteurl']" class="float-btn home-btn" title="返回首页"><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>
复制代码



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>
复制代码


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>
复制代码


以上代码实现了以下功能:

- 引入 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中。如果想更自定义一些,也可以考虑做成插件

最后附上问答图片和最后的效果图

WX20240511-212143@2x.png WX20240511-212206@2x.png WX20240511-215118@2x.png WX20240511-222334@2x.png

⭐️推荐插件
Uniapp小程序和APP
所有插件打包

⭐️推荐模板
美化APP手机版
小米社区
回复

使用道具 举报

28

主题

282

回帖

385

积分

炉火纯青

贡献
5 点
金币
35 个
QQ
发表于 2024-5-11 23:05:22 | 显示全部楼层
鸡屁踢已经这么强大了吗,恐怖如斯!
回复 支持 反对

使用道具 举报

40

主题

764

回帖

936

积分

自成一派

贡献
11 点
金币
33 个
发表于 7 天前 | 显示全部楼层
哈哈 小的修改直接问Ai了 给的代码几乎都可以用 但是效果都不太好;你这个引导提问就很好了,学会了,下次继续深度引导提问。
回复 支持 反对

使用道具 举报

1

主题

325

回帖

371

积分

炉火纯青

贡献
1 点
金币
33 个
QQ
发表于 7 天前 | 显示全部楼层
挺好的啊   
回复 支持 反对

使用道具 举报

0

主题

15

回帖

21

积分

初学乍练

贡献
0 点
金币
6 个
发表于 7 天前 | 显示全部楼层
正需要啊,没想到AI能做到这个程度,主要自己还得会修改。
回复 支持 反对

使用道具 举报

41

主题

267

回帖

339

积分

炉火纯青

贡献
3 点
金币
1 个
QQ
发表于 7 天前 | 显示全部楼层
顶楼主啦..希望楼主多发精品好帖啦.....
回复 支持 反对

使用道具 举报

41

主题

267

回帖

339

积分

炉火纯青

贡献
3 点
金币
1 个
QQ
发表于 6 天前 | 显示全部楼层
我去,现在AI都这么智能了么
回复 支持 反对

使用道具 举报

64

主题

407

回帖

590

积分

应用开发者

贡献
10 点
金币
26 个
QQ
 楼主| 发表于 5 天前 来自手机 | 显示全部楼层
pcyi 发表于 2024-5-12 08:27
哈哈 小的修改直接问Ai了 给的代码几乎都可以用 但是效果都不太好;你这个引导提问就很好了,学会了,下次 ...

这个是另外一个免费的,gpt没续费
⭐️推荐插件
Uniapp小程序和APP
所有插件打包

⭐️推荐模板
美化APP手机版
小米社区
回复 支持 反对

使用道具 举报

40

主题

764

回帖

936

积分

自成一派

贡献
11 点
金币
33 个
发表于 5 天前 | 显示全部楼层
qzuser1212 发表于 2024-5-14 11:18
这个是另外一个免费的,gpt没续费

我当时用的百度的文心一言
回复 支持 反对

使用道具 举报

64

主题

407

回帖

590

积分

应用开发者

贡献
10 点
金币
26 个
QQ
 楼主| 发表于 5 天前 | 显示全部楼层
pcyi 发表于 2024-5-14 14:10
我当时用的百度的文心一言

国内的都一言难尽,这个是免费的claude
⭐️推荐插件
Uniapp小程序和APP
所有插件打包

⭐️推荐模板
美化APP手机版
小米社区
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 关注公众号
  • 有偿服务微信
  • 有偿服务QQ

手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

GMT+8, 2024-5-19 08:02 , Processed in 0.062045 second(s), 8 queries , Redis On.

Powered by Discuz! W1.0 Licensed

Cpoyright © 2001-2024 Discuz! Team.

关灯 在本版发帖
有偿服务QQ
有偿服务微信
返回顶部
快速回复 返回顶部 返回列表