专栏名称: 知晓程序

知晓程序，是爱范儿旗下专注「小程序生态」的品牌，提供小程序资讯、教程、活动、社区等服务。更多内容请访问 minapp.com。

目录

相关文章推荐

白鲸出海 · Canva将“印度式低价策略”推向更多市场， ... · 12 小时前

百度智能云 · 百度智能云知一：大模型课程上新啦！DeepS ... · 昨天

白鲸出海 · 加了AI，这款产品下载量压过赛道No.1 · 昨天

阿里开发者 · 2025 年可观测 10 大趋势预测 · 2 天前

阿里开发者 · 部署DeepSeek，你的GPU够用吗？ · 2 天前

51好读 › 专栏 › 知晓程序

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

知晓程序 · 公众号 · 科技公司 · 2017-10-30 08:30

正文

作者：OkayChen

写在前面

最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成。

在小程序中，有一些常用的特效。 在这里就为总结一下，希望对大家和我都能有所帮助。

1. 滚动 Tab 选项卡

先看一下效果图吧，能够点击菜单或滑动页面切换，tab 菜单部分可以实现左右滚动

好了，看一下实现方法吧。

首先是 WXML 代码：

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

JS 代码如下：

2. 星级评分

按照惯例，先上效果图。

在实例中，默认一星，点击可以选择星级，可半星显示。

来看看代码。首先是 WXML：

然后是 WXSS 样式。

JS 代码：

3. 自定义底部弹出层

自定义底部弹出层，在电商的小程序中经常会用到，需要根据实际需求，自定义弹出内容。

先看下我的效果：

在这里的示例代码中，我已经把我自定义的部分抽离了出来。

照例，先是 WXML 代码：

接下来是样式 WXSS：

JS 代码如下：

写在后面

这次没有知识点讲解，是我正在做的小程序项目中我做的一些小实例的源码，总结下来了三个非常常用的。如果喜欢，或者对你有帮助，欢迎 copy 和学习。

请到「今天看啥」查看全文

推荐文章

白鲸出海 · Canva将“印度式低价策略”推向更多市场，谷歌Gemini上线“记忆”功能 | 一句话看出海新鲜事

12 小时前

百度智能云 · 百度智能云知一：大模型课程上新啦！DeepSeek大揭秘

昨天

白鲸出海 · 加了AI，这款产品下载量压过赛道No.1

昨天

阿里开发者 · 2025 年可观测 10 大趋势预测

2 天前

阿里开发者 · 部署DeepSeek，你的GPU够用吗？

2 天前

杭州日报 · 小心！身体这些地方变粗了，可能是大病的信号，没事真得观察下自己的身体！

7 年前

周到上海 · 嘀，你有一份懒人养花终极宝典，请查收

7 年前

L先生说 · 有效提高执行力，你需要这几个技巧

7 年前

幽默与笑话集锦 · 笑话：换大姨妈的时候，被女儿撞到·····

7 年前

英国大家谈 · 凶残少年犯保证改邪归正，政府花50万镑帮匿名换新身份保护，惨遭打脸

7 年前

Sov5搜索 · 小百科 · 今天看啥 · 移动版

51好读 - 好文章就要读起来!