前端技术 - 随笔分类 - 几行

Vue 结合 Animate.CSS 实现简单动画效果

摘要：我们在做项目的时候，对于一些页面元素如果能添加一些动画效果，那肯定是非常炫酷的，今天介绍一个第三方动画库 —— Animate.css . 用法很简单，不过新手容易踩坑。注意，前提是你的计算机高级系统设置里，性能选项里选择 “调整为最佳外观” 即可。一、在 <head> </head> 阅读全文

posted @ 2021-07-01 19:58 几行阅读(382) 评论(0) 推荐(0)

Vue + Swiper 使用教程

摘要：Swiper 作为一款强大的前端框架，功能全面，比如实现轮播、分页等十分好用，不过新手上来很容易踩 '坑' ，主要原因是采用的 Swiper 版本的原因，一旦解决了这个问题，那么就可以参考官方 API 文档，实现任何自己想要的功能了。 Vue 使用 Swiper 需要安装 Swiper 和 vue- 阅读全文

posted @ 2020-09-03 16:37 几行阅读(4029) 评论(0) 推荐(1)

Vue + van-swipe 实现图片轮播

摘要：图片轮播是我们经常需要用到的功能，一般在首页展示活动海报或者商品信息等，如何实现呢？今天我们借助于 Vant。效果图：主要用到： vue-lazyload（图片懒加载） Vant 的 Swipe 组件现实图片轮播 1. 在 main.js 中注册 vue-lazyload 插件： impo 阅读全文

posted @ 2020-08-27 15:54 几行阅读(8694) 评论(0) 推荐(0)

Vue + better-scroll 实现顶部固定字母标题

摘要：在做移动端开发时，有时需要用到类似于下图所示的场景，一个城市列表的页面滚动效果，或者是类似的页面效果。为了实现更好的用户体验，用户在向下滚动时，将相应的顶部字母标题固定在页面上部是很炫酷的。如何实现呢，主要的思路是运用 better-scroll 实时监听页面的滚动坐标，当 Y 轴坐标变化时，计算阅读全文

posted @ 2020-08-19 10:19 几行阅读(733) 评论(0) 推荐(0)

Vue + Vant 实现顶部关键字搜索栏

摘要：我们在做页面开发时，有的时候一般在主页的顶端会需要一个根据关键词搜索框，如何实现呢，一起来看看： <template></template>: <section class="city-search"> <van-icon class="search-icon" name="search" /> < 阅读全文

posted @ 2020-07-24 08:44 几行阅读(5073) 评论(0) 推荐(0)

Vue + Vant 实现页面顶端 TopBar

摘要：我们在做移动端开发时，有的页面顶部需要设置标题、返回上一页面箭头、关闭按钮等。不同的页面的标题不同，有的页面需要返回按钮、有的页面需要关闭按钮。我们可以根据需求，将其封装成 TopBar 组件，标题运用 Vue 组件的 props 实现动态赋值，供其他组件引用。效果图： TopBar.vue: 1 阅读全文

posted @ 2020-07-16 11:28 几行阅读(4485) 评论(0) 推荐(0)

Vue + Vant 实现底部导航栏

摘要：我们在做移动端项目的时候，底部导航栏基本可以说是必备的功能，可以方便用户在几大基本页面间切换。一套完整的底部导航栏，不仅需要具有导航菜单的显示，还需要根据实际业务逻辑判断导航栏何时显示、何时隐藏，以及在组件之间进行切换时，添加恰当的页面过渡效果，从而实现整体效果的提升。比如从 Home 组件跳转到阅读全文

posted @ 2020-07-10 14:48 几行阅读(11891) 评论(5) 推荐(0)

VUE练手项目实现音乐播放器(四)------- 播放控制组件

摘要：2020.3.31 9:18 好的，早上好各位，今天我们来进行一个很炫酷的页面开发——播放器控制页面( src\components\Play.vue )，如下图：完成目标： 1、歌曲上半部分图片封面及隐藏页面按钮布局 2、设计播放进度条 3、歌词显示 4、播放控制按钮我们可以看到，这些元素完美阅读全文

posted @ 2020-04-01 11:54 几行阅读(1459) 评论(0) 推荐(0)

VUE练手项目实现音乐播放器(三)-------排行榜明细组件

摘要：今天，我们接着上一节继续向下进行，完成当用户点击自己想听的排行榜时，显示的界面，该界面要讲解的知识点较多。文件位置：src\components\RankPage.vue ，效果图：讲解重点： 1、由 Rank.vue 页面传来的排行榜id ，获取相应排行榜的歌单(这个页面的前端布局细节有点多阅读全文

posted @ 2020-03-27 17:02 几行阅读(1195) 评论(0) 推荐(0)

VUE练手项目实现音乐播放器(二)-------排行榜组件

摘要：今天，我们来实现播放器首页的排行榜页面的开发，也就是 src\components\Rank.vue ,效果截图：主要分析要点： 1、Vuex模块化 2、CSS屏幕自适应——@media screen 3、overflow CSS处理文本溢出 4、absolute 绝对定位页面的图片、排行榜阅读全文

posted @ 2020-03-24 20:02 几行阅读(1774) 评论(0) 推荐(0)

VUE练手项目实现音乐播放器(一)-------准备阶段

摘要：趁着疫情期间不上班，在 Github上找了几个开源 VUE 项目，亲自实践了一下，学习到了不少 VUE 以及 CSS 前端布局的技巧，这次的小项目是用 VUE 实现一款音乐播放器。 Github 地址： https://github.com/Sioxas/vue-music/ 感兴趣的朋友可以下载源阅读全文

posted @ 2020-03-23 16:04 几行阅读(1939) 评论(0) 推荐(0)

几行

随笔分类 - 前端技术

公告