如何制作一个侧边栏

最新推荐文章于 2024-06-02 22:06:28 发布
最新推荐文章于 2024-06-02 22:06:28 发布
阅读量156 收藏
点赞数
分类专栏： Towify使用教程 文章标签： 微信小程序 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/towify/article/details/127898692
版权

效果展示

前置准备

  • 侧边栏图片素材

具体步骤

  • 添加一个菜单图标
  • 制作侧边栏
  • 创建侧边栏触发器

步骤分解

  • 添加一个菜单图标
  • 拖拽 图标 到根容器
  • 选中 图标
  • 点击 检查面板 中的 数据绑定与设置
  • 选择菜单图标

  • 制作侧边栏
  • 点击 图层
  • 点击加号
  • 点击 侧边栏悬浮层

  • 拖拽 图片组件 到 侧边栏悬浮层
  • 选中图片
  • 点击 检查面板 中的 数据绑定与设置
  • 点击 上传图片 上传准备的素材

  • 创建侧边栏触发器
  • 选中图标
  • 点击 检查面板 的 触发器
  • 创建 触发器

Towify
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【VS Code插件开发】自定义侧边栏、视图（六）
编码世界
09-06 7万+
在 VS Code 开发工具中，可以在侧边栏中创建一个持久化的自定义视图。这个视图可以随着 VS Code 的不同窗口、标签页之间的切换而保持存在。侧边栏官方文档讲解用于定义自定义视图容器。位于编辑器侧边的垂直工具栏。活动栏提供了快速访问各种功能、面板和操作的图标按钮，使用户能够轻松地切换和执行不同的任务。
delphi 侧边栏_OrangeUI
weixin_28813357的博客
02-23 408
The function introduction of the three-party SDK smart deployment tool (supports both Chinese and English)Because I often need to dock some third-party SDKs in the process of developing APP, in order ...
如何使用Towify在小程序中配置获取邮箱验证码？
Towify的博客
10-10 244
使用Towify在小程序中配置获取邮箱验证码的操作非常简单，文章中给出了详细的步骤，想要自己制作小程序的朋友们可以关注一下。
Towify如何快速生成app安装教程
jakelihua
12-08 1994
Towify是一款对于没有编程基础，然后想要制作app的用户，后续博主会持续更新相关教程。
小程序不靠代码写了，而是Towify2天“拖”出来的
nocode996的博客
07-27 6781
这就是下一代的编程语言--Nocode Platform无代码开发平台：Towify。
如何使用 Towify 在小程序里实现一个广告轮播图？
Towify的博客
10-21 218
下面就如何实现一个广告轮播图来进行具体操作。 欢迎大家试用我们的无代码开发平台 Towify 制作自己的微信小程序。
如何使用容器制作个性化卡片样式
Towify的博客
11-21 105
本文将介绍使用Towify制作容器制作个性化卡片样式
用javascript写一个侧边栏跟随页面滑动事件代码
weixin_42584507的博客
02-15 322
以下是一个简单的JavaScript代码示例，可以实现侧边栏跟随页面滑动事件： // 获取侧边栏和页面主体元素 const sidebar = document.querySelector('#sidebar'); const mainContent = document.querySelector('#main-content'); // 监听窗口滚动事件 window.addEventLis...
【记录】vue-cli+element-ui 制作一个侧边栏组件（抽屉Drawer）
VVVVV
04-02 6418
用到的组件 el-drawer抽屉、el-button按钮 测试还用到了输入框等组件 功能 1.自由添加按钮，并可使按钮居中 2.抽屉里的内容由<slot>插入，用的具名插槽 3.鼠标悬停在按钮时出现文字 4.可指定侧边栏距离窗口最右侧的距离
侧边栏-网页效果制作
01-09
jquery实现的网页侧边栏
侧边栏多级
02-03
jQuery基于awesome.css图标样式库制作网页固定的侧边栏手风琴式导航下拉菜单，支持二级和三级下拉菜单效果代码。
jQuery侧边栏菜单滑动展开代码
06-24
jQuery侧边栏菜单滑动展开代码是一款基于bootstrap框架制作的网页左侧边栏下拉菜单特效。
Bootstrap3隐藏滑动侧边栏菜单代码
06-24
Bootstrap3隐藏滑动侧边栏菜单代码是一款通过汉堡包按钮来打开和关闭侧边栏菜单，并通过CSS3来制作平滑的过渡动画效果。
微信小程序蓝牙连接部分Android14调用wx.setBLEMTU协商低功耗最大传输单元失败解决方案（部分安卓14设置超过23就会报错）
weixin_44705979的博客
05-30 239
【代码】微信小程序蓝牙连接部分Android14调用wx.setBLEMTU协商低功耗最大传输单元失败解决方案（部分安卓14设置超过23就会报错）
【Uniapp微信小程序】自定义水印相机、微信小程序地点打卡相机
cnsv的博客
05-29 450
uniapp微信小程序自定义水印相机。微信小程序水印打卡相机。水印相机/水印字体根据图片像素自适应。
微信小程序上架，AI类目审核（AI问答、AI绘画、AI换脸）
05-29 387
小程序对于生成式AI类目的产品上架审核较为严格，这也是近两年新增了几个类目，一旦小程序中涉及生成式AI相关的内容，如果你选择相应类目，但审核被划归为这一类，都需要准备此类目的审核，才能正常上架。资质文件到互联网信息服务算法备案系统中去查找，你使用哪个平台的，找对应的平台即可，截图下载，上传即可。以百度智能云为例，开通了相关模型的计费服务，相当于采购了服务，百度智能云提供对应的合同供使用者下载。找到合同管理，如果是第一次，点击申请合同，可以把合同下载下来打印，再盖上本公司的公章即可。
微信小程序的服务调取
最新发布
weixin_52350720的博客
06-02 241
6.02打卡
uni-app的网络请求库封装及使用（同时支持微信小程序）
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-30 1018
在uni-app中，常见的网络库主要是基于uni-app内置的uni.request()方法，这是一个统一的网络请求接口，支持HTTP和HTTPS协议，可以处理GET、POST等请求方法。这个API提供了基本的HTTP请求功能，可以满足大部分应用的网络通信需求。除此之外，由于uni-app是基于Vue.js的，所以也可以使用一些适用于前端的JavaScript网络库如axios 第三方库，支持Promise API，有丰富的拦截器、配置选项和错误处理。
python的tkinter如何做一个侧边栏
05-29
要在Python中使用Tkinter制作一个侧边栏，需要使用Frame和Label控件。以下是一个简单的示例代码： ```python from tkinter import * root = Tk() # 创建左侧边栏 sidebar = Frame(root, bg='gray', width=100, height=500) sidebar.pack(side=LEFT, fill=Y) # 在侧边栏中添加标签 label1 = Label(sidebar, text='标签1', bg='gray') label1.pack() label2 = Label(sidebar, text='标签2', bg='gray') label2.pack() label3 = Label(sidebar, text='标签3', bg='gray') label3.pack() # 创建主窗口 main_window = Frame(root, bg='white', width=400, height=500) main_window.pack(side=LEFT, fill=BOTH, expand=True) # 在主窗口中添加内容 content1 = Label(main_window, text='内容1', bg='white') content1.pack() content2 = Label(main_window, text='内容2', bg='white') content2.pack() content3 = Label(main_window, text='内容3', bg='white') content3.pack() root.mainloop() ``` 在上述代码中，我们首先创建了一个左侧边栏（sidebar），并向其中添加了三个标签（label1、label2和label3）。然后，我们创建了一个主窗口（main_window），并向其中添加了三个内容区域（content1、content2和content3）。将sidebar和main_window放置在同一个窗口中，使它们并排显示。通过将sidebar的fill属性设置为Y，可以使其自动调整大小以适应窗口的高度。通过将main_window的fill属性设置为BOTH，expand属性设置为True，可以使其自动调整大小以填充窗口的剩余空间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值