本文主要是介绍小程序圆球导航，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
wxml
<!-- 导航 -->
<view class='navBox'><view class='navBtn' wx:for="{{navBtn}}" wx:key="{{index}}"><image class='navImg' src='' style='background:{{item.bgc}}'></image><view class='navName'>{{item.name}}</view></view>
</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: [{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#5098D2' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#DA70A0' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#DF975C' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#95B1FA' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#77BF6B' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#F1E85B' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#EC5D55' },{ 'name': '模考题库', 'icon': '', 'url': '../tiku/tiku', 'bgc': '#A3619E' },]}
})这篇关于小程序圆球导航的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
