小程序开发:在插件市场寻找步骤条组件并二开

这篇具有很好参考价值的文章主要介绍了小程序开发:在插件市场寻找步骤条组件并二开。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

想实现一个可滚动的步骤条用来显示自己的随笔

作为一名全栈工程师,要是全部都自己写,那太废时间了,首先去uniapp的插件市场逛逛看有没有符合需要的组件先:
第一个:

小程序开发:在插件市场寻找步骤条组件并二开

 

看着符合自己的要求了,该有的有了,但是感觉左边的色调太单调了,故pass。
第二个:

小程序开发:在插件市场寻找步骤条组件并二开

 

这个看起来颜色就比较丰富一些了,右边也有卡片式的布局,就这个了,故把插件下到本地look look。

小程序开发:在插件市场寻找步骤条组件并二开

 

本地跑起来发现左边的线条没有达到当前区块的高度,大概是这样:

小程序开发:在插件市场寻找步骤条组件并二开

 

只有一半,看看源码:

小程序开发:在插件市场寻找步骤条组件并二开

 

发现用的是after的形式,这个after没有相对于大的区间的父级做定位。

小程序开发:在插件市场寻找步骤条组件并二开

 

可以看到大的区间高度是包含全部这个区间内的所有卡片的,所以想到在大区间设置相对定位,然后再在大区间内加一个子div做绝对定位,说干就干:

小程序开发:在插件市场寻找步骤条组件并二开

 

之前的结构我都没动,效果如下:

小程序开发:在插件市场寻找步骤条组件并二开

 

不管大区块是一个卡片还是两个卡片,甚至多个卡片都可以显示高度了。
接下来就是调整年份和月份的显示了,还是把原来的after干掉。
经过我的一阵捣腾。最终的效果如下:

小程序开发:在插件市场寻找步骤条组件并二开

 

最后把这个组件无用的地方全部删除干净和移植到自己的小程序上即可。

先写到这里了,今天有点晚了,请关注我哦~文章来源地址https://www.toymoban.com/news/detail-785641.html

到了这里,关于小程序开发:在插件市场寻找步骤条组件并二开的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序开发】一文带你详解小程序组件和 API 的使用

    在小程序开发中,组件和API是非常重要的部分,它们可以帮助我们构建丰富的用户界面和实现各种功能。本文将介绍小程序中常用的组件和API,并提供相应的代码示例。 小程序的组件是构建用户界面的基本元素。它们可以用于展示数据、接收用户输入、实现交互等。 下面是

    2024年02月12日
    浏览(55)
  • 交友系统程序开发,前后端源码交付,允许二开,UI配色新颖,APP小程序H5随心搭配!

    在开发设计与测试阶段,主要包括了程序开发、测试和上线运营等环节。根据产品经理确定的功能需求,开发团队开始进行具体的编程和开发工作。这个过程中需要考虑到不同设备、不同系统和不同版本的需求,确保软件可以在不同平台上稳定运行。 测试是确保软件质量的重

    2024年01月20日
    浏览(47)
  • 微信小程序 | 小程序开发

    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(60)
  • python做微信小程序开发,python怎么开发小程序

    大家好,小编来为大家解答以下问题,python做微信小程序开发,python怎么开发小程序,今天让我们一起来看看吧! 大家好,小编为大家解答用python编写一个小程序的问题。很多人还不知道如何用python做小软件,现在让我们一起来看看吧! 大家好,小编来为大家解答以下问题

    2024年03月12日
    浏览(63)
  • 微信小程序开发15 项目实战 基于云开发开发一个在线商城小程序

    在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识。在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识和能力。而第 4 个模块里,我带你认识了微信小程序的云

    2024年02月11日
    浏览(50)
  • 微信小程序开发 | 音乐小程序项目

    2023年04月20日
    浏览(40)
  • 【小程序开发】小程序的架构和配置

    🤗这里是前端程序员小张! 🌻人海茫茫,感谢这一秒你看到这里。希望我的文章对你的有所帮助! 🌟愿你在未来的日子,保持热爱,奔赴山海! 小程序的宿主环境为微信客户端 宿主环境执行小程序的各种文件:wxml文件、wxss文件、js文件 当小程序基于 WebView 环境下时,

    2024年02月09日
    浏览(44)
  • 微信小程序开发教程(二)--上传小程序

    接上文,我们已经有一个小例子了。 在模拟器的位置,点击头像,会登录。 此时我们可以第一次尝试将我们的小程序进行上传。 点击下图箭头所指位置: 点击确定: 填写版本号和备注信息,选择上传: 在网页管理小程序上,选择上传,以下都选择红框所在位置: 填写相关

    2023年04月25日
    浏览(40)
  • 微信小程序开发---小程序的页面配置

    目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 在每个小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观,页面效果进行配置。 小程序中,app.json中的windows节点,可以全局配置小程序中每个页面的窗口表

    2024年02月09日
    浏览(47)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包