浙江铃声推荐联盟

开发 | 小程序不够「高级」?那是因为你没用上这 3 个特效!

知晓程序2018-12-05 15:53:00

作者:OkayChen

写在前面
最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成。
在小程序中,有一些常用的特效。在这里就为总结一下,希望对大家和我都能有所帮助。
1. 滚动 Tab 选项卡
先看一下效果图吧,能够点击菜单或滑动页面切换,tab 菜单部分可以实现左右滚动
好了,看一下实现方法吧。
首先是 WXML 代码:

在 WXSS 代码中,这里只展示 tab 菜单处的样式代码。

JS 代码如下:



2. 星级评分
按照惯例,先上效果图。
在实例中,默认一星,点击可以选择星级,可半星显示。
来看看代码。首先是 WXML:

然后是 WXSS 样式。


JS 代码:


3. 自定义底部弹出层
自定义底部弹出层,在电商的小程序中经常会用到,需要根据实际需求,自定义弹出内容。
先看下我的效果:
在这里的示例代码中,我已经把我自定义的部分抽离了出来。
照例,先是 WXML 代码:

接下来是样式 WXSS:

JS 代码如下:

写在后面
这次没有知识点讲解,是我正在做的小程序项目中我做的一些小实例的源码,总结下来了三个非常常用的。如果喜欢,或者对你有帮助,欢迎 copy 和学习。
另外,这个项目会在 GitHub 上持续更新。
关注「知晓程序」微信公众号,回复「源码」,获取本项目源码更新。
欢迎大家 star、在留言区中留下你的建议。
关注「知晓程序」公众号 ?
  • 在微信后台回复「开发」,获取小程序开发。

  • 在微信后台回复「定制」,做一个属于你的小程序。


▽ 点击「阅读原文」,发现更多优质小程序