小程序中如何实现小圆球的导航 （代码）

本篇文章给大家带来的内容是关于小程序中如何实现小圆球的导航 （代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

wxml

 !-- 导航 -- view >
wxss
/* 导航 */
.navBox{
 display: flex; 
 flex-wrap: wrap; 
 height: 450rpx; 
 background: #fff; 
 margin-top: 15rpx; 
 padding: 20rpx 0; 
 box-sizing: border-box; 
 font-size: 9pt;
.navBtn{
 width: 25%; 
 text-align: center; 
 padding-top: 15rpx; 
 box-sizing: border-box;
.navImg{
 display:block; 
 width: 125rpx; 
 height:125rpx; 
 margin:0 auto; 
 border-radius: 50%;
.navName{
 padding: 
 10rpx 0;
 }
js
Page({
 data: {
 navBtn: [{ #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#5098D2 #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#DA70A0 #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#DF975C #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#95B1FA #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#77BF6B #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#F1E85B #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#EC5D55 #39; },
 { #39;name #39;: #39;模考题库 #39;, #39;icon #39;: #39; #39;, #39;url #39;: #39;../tiku/tiku #39;, #39;bgc #39;: #39;#A3619E #39; },
})
相关推荐：
如何去掉导航栏中的小实心圆圈_html/css_WEB-ITnose

微信小程序顶部可滚动导航效果

微信小程序实现圆形进度条方法介绍
以上就是小程序中如何实现小圆球的导航 （代码）的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。